Button

A clickable action in several variants and sizes. Pick a variant for what the action means.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add button

Usage

Use status for async feedback. Every label occupies the same grid cell, so state changes never resize the button; success and error switch to a matching semantic surface.

import { Button } from '$lib/sivir/components/button';

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

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

Examples

Explore the Button in different variants, sizes, and compositions.

Primary

Secondary

Outline

Ghost

Quiet

Destructive

Panel

Sizes

Disabled

Leading icon

Trailing icon

Loading

Icon group

Anatomy

Button - Triggers an action or navigation.