<script lang="ts">
import { Button } from "kumo-svelte/components/button";
import PlusIcon from "phosphor-svelte/lib/PlusIcon";
</script>
<div class="flex flex-wrap items-center gap-2">
<Button variant="secondary">Button</Button>
<Button variant="secondary" shape="square" icon={PlusIcon} aria-label="Add" />
</div>
Import
import { Button, LinkButton } from "kumo-svelte/components/button";Usage
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
</script>
<Button variant="secondary">Click me</Button>Examples
Variants
Primary
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
</script>
<Button variant="primary">Primary</Button>
Secondary
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
</script>
<Button variant="secondary">Secondary</Button>
Ghost
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
</script>
<Button variant="ghost">Ghost</Button>
Destructive
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
</script>
<Button variant="destructive">Destructive</Button>
Outline
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
</script>
<Button variant="outline">Outline</Button>
Secondary Destructive
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
</script>
<Button variant="secondary-destructive">Secondary Destructive</Button>
Sizes
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
</script>
<div class="flex flex-wrap items-center gap-3">
<Button size="xs" variant="secondary">Extra Small</Button>
<Button size="sm" variant="secondary">Small</Button>
<Button size="base" variant="secondary">Base</Button>
<Button size="lg" variant="secondary">Large</Button>
</div>
With Icon
Use the icon prop for the common leading-icon case, or render the icon as a child when you need custom icon markup.
As prop
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
import PlusIcon from "phosphor-svelte/lib/PlusIcon";
</script>
<Button variant="secondary" icon={PlusIcon}>
Create Worker
</Button>
As child
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
import PlusIcon from "phosphor-svelte/lib/PlusIcon";
</script>
<Button variant="secondary">
<PlusIcon />
Create Worker
</Button>
Icon Only
For icon-only buttons, use shape="square" or shape="circle" with either the icon prop or an icon child. Always include aria-label for accessibility — without visible text, screen readers need the label to convey the button’s purpose.
As prop
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
import PlusIcon from "phosphor-svelte/lib/PlusIcon";
</script>
<div class="flex flex-wrap items-center gap-3">
<Button
variant="secondary"
shape="square"
icon={PlusIcon}
aria-label="Add item"
/>
<Button
variant="secondary"
shape="circle"
icon={PlusIcon}
aria-label="Add item"
/>
</div>
As child
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
import PlusIcon from "phosphor-svelte/lib/PlusIcon";
</script>
<div class="flex flex-wrap items-center gap-3">
<Button variant="secondary" shape="square" aria-label="Add item">
<PlusIcon />
</Button>
<Button variant="secondary" shape="circle" aria-label="Add item">
<PlusIcon />
</Button>
</div>
Loading State
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
</script>
<Button variant="primary" loading>
Loading...
</Button>
Disabled State
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
</script>
<Button variant="secondary" disabled>
Disabled
</Button>
Tooltip
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.
<script lang="ts">
import { Button } from "kumo-svelte/components/button";
import PlusIcon from "phosphor-svelte/lib/PlusIcon";
</script>
<div class="flex flex-wrap items-center gap-2">
<Button variant="secondary" title="Create a new Worker">
Create Worker
</Button>
<Button
variant="secondary"
shape="square"
icon={PlusIcon}
aria-label="Add item"
title="Add item"
/>
</div>
Link as Button
Use 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.
<script lang="ts">
import { LinkButton } from "kumo-svelte/components/button";
import ArrowSquareOutIcon from "phosphor-svelte/lib/ArrowSquareOutIcon";
</script>
<div class="flex flex-wrap items-center gap-2">
<LinkButton href="/components/link" variant="secondary">
Read Link docs
</LinkButton>
<LinkButton href="https://developers.cloudflare.com"
variant="ghost"
icon={ArrowSquareOutIcon}
external
>
Cloudflare docs
</LinkButton>
</div>
API Reference
Button
| Prop | Type | Default |
|---|---|---|
| shape | KumoButtonShape | KUMO_BUTTON_DEFAULT_VARIANTS.shape |
| size | KumoButtonSize | KUMO_BUTTON_DEFAULT_VARIANTS.size |
| variant | KumoButtonVariant | KUMO_BUTTON_DEFAULT_VARIANTS.variant |
| class | string | — |
| children | Snippet | — |
| icon | Component | — |
| loading | boolean | false |
| title | Snippet | string | null | — |
LinkButton
| Prop | Type | Default |
|---|---|---|
| shape | KumoButtonShape | KUMO_BUTTON_DEFAULT_VARIANTS.shape |
| size | KumoButtonSize | KUMO_BUTTON_DEFAULT_VARIANTS.size |
| variant | KumoButtonVariant | "ghost" |
| class | string | — |
| children | Snippet | — |
| icon | Component | — |
| external | boolean | false |