Button - Kumo Svelte

<script lang="ts">
  import { Button } from 'kumo-svelte';
  import { Plus } from 'phosphor-svelte';
</script>

<div class="flex flex-wrap items-center gap-2">
  <Button variant="secondary">Button</Button>
  <Button variant="secondary" shape="square" aria-label="Add">
    <Plus class="size-4" />
  </Button>
</div>

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

<script lang="ts">
  import { Button } from 'kumo-svelte';
</script>

<Button variant="primary">Primary</Button>

Secondary

<script lang="ts">
  import { Button } from 'kumo-svelte';
</script>

<Button variant="secondary">Secondary</Button>

Ghost

<script lang="ts">
  import { Button } from 'kumo-svelte';
</script>

<Button variant="ghost">Ghost</Button>

Destructive

<script lang="ts">
  import { Button } from 'kumo-svelte';
</script>

<Button variant="destructive">Destructive</Button>

Outline

<script lang="ts">
  import { Button } from 'kumo-svelte';
</script>

<Button variant="outline">Outline</Button>

Secondary Destructive

<script lang="ts">
  import { Button } from 'kumo-svelte';
</script>

<Button variant="secondary-destructive">Secondary destructive</Button>

Sizes

<script lang="ts">
  import { Button } from 'kumo-svelte';
</script>

<div class="flex flex-wrap items-center gap-2">
  <Button size="xs">Extra small</Button>
  <Button size="sm">Small</Button>
  <Button size="base">Base</Button>
  <Button size="lg">Large</Button>
</div>

With Icon

<script lang="ts">
  import { Button } from 'kumo-svelte';
  import { Plus } from 'phosphor-svelte';
</script>

<Button>
  <Plus class="size-4" />
  Create Worker
</Button>

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.

<script lang="ts">
  import { Button } from 'kumo-svelte';
  import { Plus } from 'phosphor-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <Button variant="secondary" shape="square" aria-label="Add item">
    <Plus class="size-4" />
  </Button>
  <Button variant="secondary" shape="circle" aria-label="Add item">
    <Plus class="size-4" />
  </Button>
</div>

Loading State

<script lang="ts">
  import { Button } from 'kumo-svelte';
</script>

<Button variant="primary" loading>Loading...</Button>

Disabled State

<script lang="ts">
  import { Button } from 'kumo-svelte';
</script>

<Button variant="secondary" disabled>Disabled</Button>

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.

<script lang="ts">
  import { Button } from 'kumo-svelte';
  import { Plus } from 'phosphor-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <Button variant="secondary" title="Create a new Worker">Create Worker</Button>
  <Button variant="secondary" shape="square" aria-label="Add item" title="Add item">
    <Plus class="size-4" />
  </Button>
</div>

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.

Read Link docs Cloudflare Docs

<script lang="ts">
  import { Button } from 'kumo-svelte';
  import { ArrowSquareOut as ExternalLink } from 'phosphor-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <Button href="/components/link" variant="secondary">Read Link docs</Button>
  <Button href="https://developers.cloudflare.com" variant="ghost">
    Cloudflare Docs <ExternalLink class="size-4" />
  </Button>
</div>

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.