Button
Trigger actions. Supports 6 variants, 3 sizes, loading state, and icons.
Variants
import { Button } from '@canarist/ui'
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="inverse">Inverse</Button>
<Button variant="destructive">Destructive</Button>Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>Loading state
<Button loading>Saving...</Button>
<Button variant="secondary" loading>Loading</Button>Disabled
<Button disabled>Disabled</Button>
<Button variant="secondary" disabled>Disabled</Button>Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'outline' | 'inverse' | 'ghost' | 'destructive' | 'primary' | Visual style of the button. |
| size | 'sm' | 'md' | 'lg' | 'md' | Height and padding of the button. |
| loading | boolean | — | Show spinner and disable the button. |
| icon | ReactNode | — | Icon rendered before the label. |
| iconRight | ReactNode | — | Icon rendered after the label. |
| disabled | boolean | — | Disable the button. |