Triggers actions or navigation. Supports five visual variants, three sizes, loading and disabled states.
Preview
Code
VUE
<Button>
Click me
</Button>Props
Button text content (maps to default slot)
Visual style variant
Button size
Disables the button and prevents interaction
Shows a spinner; implies disabled
Stretches the button to fill its container
Props API
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | "Click me" | — | Button text content (maps to default slot) |
variant | select"primary" | "secondary" | "ghost" | "destructive" | "outline" | "primary" | — | Visual style variant |
size | select"sm" | "md" | "lg" | "md" | — | Button size |
disabled | boolean | false | — | Disables the button and prevents interaction |
loading | boolean | false | — | Shows a spinner; implies disabled |
fullWidth | boolean | false | — | Stretches the button to fill its container |
Usage
Use "primary" for the single main call-to-action per section. "secondary" and "ghost" work for supporting actions. Reserve "destructive" strictly for irreversible operations like permanent deletion. Never use more than one "primary" button in the same visual group.
Accessibility
Uses a native <button> element for full keyboard and screen reader support.
Disabled state sets aria-disabled="true" and prevents pointer events.
Loading state sets aria-busy="true" and provides a visually hidden loading label.
Focus ring uses a 2px outline with 2px offset — visible in all themes.