Button

Updated

Interactive button component with variants, sizes, loading state, and link rendering.

Source

Import

ts 
import Button from '$lib/components/Button.svelte';

Usage

svelte 
<Button>Click me</Button>

Variants

Five visual styles to match your UI context.

svelte 
<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

Sizes

svelte 
<Button size="sm">Small</Button>
<Button>Default</Button>
<Button size="lg">Large</Button>

With Icons

Pass SVG icons as children — they inherit currentColor.

Icon Only

Use variant="icon" with ariaLabel for accessible icon buttons.

svelte 
<Button variant="icon" ariaLabel="Like">
  <svg .../>
</Button>

Loading State

Shows a spinner and blocks clicks during async operations. Click to see it in action.

svelte 
<Button loading={true}>Loading...</Button>

As Link

Pass href to render as <a> — all button styles apply.

Go to Home GitHub ↗
svelte 
<Button href="/dashboard">Go to Dashboard</Button>
<Button href="https://example.com" external>External Link</Button>

Disabled State

Interactive Demo

API Reference

PropTypeDefaultDescription
variant 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'icon''primary'Visual style of the button.
size 'sm' | 'md' | 'lg' | 'icon''md'Size preset for padding and font.
href string—Renders as <a> when provided.
external booleanfalseAdds target="_blank" rel="noreferrer" to links.
disabled booleanfalsePrevents interaction and reduces opacity.
loading booleanfalseShows spinner; blocks clicks during async operations.
fullWidth booleanfalseStretches to fill its container width.
type 'button' | 'submit' | 'reset''button'HTML button type attribute.
ariaLabel string—Accessible label, required for icon-only buttons.
ariaPressed boolean—ARIA toggle state for icon buttons.
onclick (e: MouseEvent) => void—Click handler — skipped when disabled or loading.
class string—Extra CSS classes merged with the base button class.
children Snippet—Button label and optional icon content.