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

As link

Open docs

Icon group

Anatomy

Button - Triggers an action or navigation.