Studio
2

Button

Installation

pnpm dlx @mielui/svelte add button

Usage

Set href to render a link, including an empty href. Without it, Button renders a native button.

Disabled links have no navigation destination and are skipped by Tab. aria-disabled also blocks activation. Loading controls remain focusable but cannot activate.

Use status for loading, success, and error feedback. Changing status keeps the button width stable.

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

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

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

Examples

Variants

Sizes

Disabled

Leading icon

Trailing icon

Loading, success, and retry

Icon group

API reference

Button

Triggers an action or navigation.

Prop Type Default
disabled boolean | undefined false
variant ButtonVariant | undefined 'primary'
size "sm" | "md" | "lg" | "icon" | undefined 'md'
children Snippet<[]> | undefined —
element Bindable HTMLButtonElement | HTMLAnchorElement | undefined

Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:

 —
unstyled boolean | undefined

Skip the variant/size base classes and render with `class` alone.

 false
status ButtonStatus | undefined

Controlled visual state. Loading remains focusable and refuses activation.

 —
loading boolean | undefined

Convenience alias for `status="loading"`.

 —
loadingLabel string | undefined —
successLabel string | undefined —
errorLabel string | undefined —
onclick ((event: MouseEvent) => void) | undefined —
onkeydown ((event: KeyboardEvent) => void) | undefined —
href string | undefined —