Button
A polymorphic button component with variants, sizes, and loading states. Renders as a button or anchor depending on props.
Interactive Playground
Button
Try different variants and sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger' | 'success' | 'primary' | Visual style of the button |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size of the button |
disabled | boolean | false | Disables the button |
loading | boolean | false | Shows loading spinner and disables interaction |
fullWidth | boolean | false | Makes button expand to full width |
href | string | - | If provided, renders as an anchor element |
type | 'button' | 'submit' | 'reset' | 'button' | Button type attribute |
onclick | function | - | Click handler |
iconLeft | Snippet | - | Icon slot before content |
iconRight | Snippet | - | Icon slot after content |
Examples
Basic Usage
All Variants
Sizes
States
As Link
When href is provided, Button renders as an anchor element:
Accessibility
- Uses native
<button>element by default - Supports
disabledstate with proper ARIA - Loading state sets
aria-busy="true" - Link buttons include
role="button" - Focus ring visible for keyboard navigation