Component
A flexible action primitive with variants, sizes, icons, loading states, and full TypeScript props.
Live previews paired with copyable source.
Use variants to match the hierarchy of an action.
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>Pair sizes with icons for compact toolbars or primary actions.
<Button size="sm">Small</Button>
<Button size="md" icon={<Check className="h-4 w-4" />}>Confirm</Button>
<Button size="lg" icon={<Download className="h-5 w-5" />}>Download</Button>State styles communicate progress, completion, warnings, and disabled actions.
<Button state="loading">Loading</Button>
<Button state="success">Success</Button>
<Button state="error">Error</Button>
<Button state="warning">Warning</Button>
<Button state="disabled">Disabled</Button>Props available on the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'primary' | Controls the visual style of the button. |
| size | 'sm' | 'md' | 'lg' | 'md' | Sets the button height, padding, and text size. |
| state | 'default' | 'loading' | 'success' | 'error' | 'warning' | 'disabled' | 'default' | Displays contextual iconography and state styling. |
| fullWidth | boolean | false | Makes the button span the full width of its parent. |
| icon | React.ReactNode | undefined | Optional icon rendered before the button label. |
| disabled | boolean | false | Disables pointer and keyboard interaction. |