Kleri UI

Component Preview
Kleri UI / Components / Button

Button

Interactive buttons with states, effects, and feedback.

KleriButton

Primary action button with built-in success state, animated feedback, and disabled state.

Usage 
<script lang="ts">
  import { KleriButton } from '@kleri/ui';
</script>

<KleriButton
  showSuccess={false}
  successMessage="Success!"
  successTimeout={2000}
  disabled={false}
>
  Click me
</KleriButton>

Props

Show Success

false

Disabled

false

KleriUtilityButton

Utility button with built-in tooltip support and hover effects.

Usage 
<script lang="ts">
  import { KleriUtilityButton } from '@kleri/ui';
</script>

<KleriUtilityButton
  tooltip="Click to perform action"
>
  Utility
</KleriUtilityButton>

Props

KleriButtonGroup

Groups related buttons together with merged borders, radius stripping, and shared size / variant context. Includes optional Separator and Text subcomponents.

Usage 
<script lang="ts">
  import { KleriButtonGroup } from '@kleri/ui';
  import { Copy, Delete, Save } from '@lucide/svelte';
</script>

<KleriButtonGroup
  orientation="horizontal"
  size="sm"
  variant="default"
  items={[
    {
      type: 'button',
      label: 'Save',
      icon: Save,
      tooltip: 'Save file'
    },
    {
      type: 'button',
      label: 'Copy',
      icon: Copy,
      tooltip: 'Copy file'
    },
    {
      type: 'button',
      label: 'Delete',
      icon: Delete,
      tooltip: 'Delete file'
    }
  ]}
/>

Props

Show Separator

false

Show Text Prefix

false

KleriMagicButton

Button with an animated radial gradient border that follows the cursor and an inner glow effect.

Usage 
<script lang="ts">
  import { KleriMagicButton } from '@kleri/ui';
</script>

<KleriMagicButton
  gradientSize={150}
  gradientColor="rgb(132, 204, 184)"
  gradientOpacity={0.25}
  gradientFrom="rgb(132, 204, 184)"
  gradientTo="rgb(25, 96, 114)"
>
  Magic Button
</KleriMagicButton>

Props