Button

Renders a button element, or a link when you pass href. Defaults to the primary variant at medium size.

<script lang="ts">
    import { Button } from '@sivir-ui/svelte/components/button';
</script>

<Button>Get started</Button>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add button

Usage

Set status to loading, success, or error for async feedback, then back to idle. The button resizes to fit each label and animates between widths, and status labels fade in letter by letter. Clicks are ignored while loading. The default labels are Loading…, Done, and Try again.

import { Button } from '@sivir-ui/svelte/components/button';

let status: 'idle' | 'loading' | 'success' | 'error' = $state('idle');

<Button {status} loadingLabel="Publishing…" successLabel="Published">
  Publish
</Button>

Examples

Leading icon

<script lang="ts">
    import Plus from '@lucide/svelte/icons/plus';
    import { Button } from '@sivir-ui/svelte/components/button';
</script>

<Button>
    <Plus size={14} />
    New project
</Button>

Trailing icon

<script lang="ts">
    import ArrowRight from '@lucide/svelte/icons/arrow-right';
    import { Button } from '@sivir-ui/svelte/components/button';
</script>

<Button>
    Continue
    <ArrowRight size={14} />
</Button>

Status

<script lang="ts">
    import { Button, type ButtonStatus } from '@sivir-ui/svelte/components/button';

    let status = $state<ButtonStatus>('idle');

    async function publish() {
        status = 'loading';
        await new Promise((resolve) => setTimeout(resolve, 1000));
        status = 'success';
    }
</script>

<Button
    {status}
    loadingLabel="Publishing…"
    successLabel="Published"
    onclick={publish}
>
    Publish
</Button>

As link

Open docs

<script lang="ts">
    import ExternalLink from '@lucide/svelte/icons/external-link';
    import { Button } from '@sivir-ui/svelte/components/button';
</script>

<Button href="/docs">
    <ExternalLink size={13} />
    Open docs
</Button>

Disabled

<script lang="ts">
    import { Button } from '@sivir-ui/svelte/components/button';
</script>

<Button disabled>Get started</Button>

Icon group

<script lang="ts">
    import Download from '@lucide/svelte/icons/download';
    import Send from '@lucide/svelte/icons/send';
    import Trash from '@lucide/svelte/icons/trash-2';
    import { Button } from '@sivir-ui/svelte/components/button';
</script>

<div class="flex items-center gap-2">
    <Button variant="ghost" aria-label="Download"><Download size={14} /></Button>
    <Button variant="ghost" aria-label="Send"><Send size={14} /></Button>
    <Button variant="ghost" aria-label="Delete"><Trash size={14} /></Button>
</div>

Anatomy

Button - Triggers an action or navigation.