Installation
Barrel
import { Button, LinkButton, RefreshButton } from 'kumo-svelte';Granular
import { Button, LinkButton, RefreshButton } from 'kumo-svelte/components/button';Usage
<script lang="ts"> import { Button } from 'kumo-svelte';</script><Button variant="secondary">Click me</Button>Examples
Variants
Primary
Secondary
Ghost
Destructive
Outline
Secondary Destructive
Sizes
With Icon
Icon Only
For icon-only buttons, use shape="square" or shape="circle" with the icon prop. Always include aria-label for accessibility — without visible text, screen readers need the label to
convey the button's purpose.
Loading State
Disabled State
Title
Use the title prop to wrap the button in a tooltip. This is useful for
icon-only buttons or whenever additional context helps the user understand
the action.
Link as Button
Use Button.LinkButton when the interaction should navigate somewhere but still look
like a button. Use Button for in-place actions like submitting, opening, or
toggling UI.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | 'base' | 'square' | 'circle' | "base" | Shape preset. |
| size | 'xs' | 'sm' | 'base' | 'lg' | "base" | Size preset. |
| variant | 'primary' | 'secondary' | 'ghost' | 'destructive' | 'secondary-destructive' | 'outline' | "secondary" | Visual variant. |
| children | Snippet | - | Child snippet rendered by the component. |
| class | string | - | Additional classes merged onto the root element. |
| icon | Component | - | Icon rendered by the component. |
| loading | boolean | false | Loading state. |
| title | string | - | Tooltip content shown when hovering the button. |
| disabled | boolean | false | Disables the component. |
| type | 'button' | 'submit' | 'reset' | "button" | Native button type. |