Button
The primary action primitive: 5 variants × 3 sizes, all token-bound.
Maps 1:1 to the Figma Button component set. States (hover, focus, disabled) are handled entirely with CSS pseudo-classes, not extra props: what looks like a variant in Figma is a real interactive state in code.
Variants
Sizes
With icons
Loading
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'primary' | Visual style of the button. |
| size | 'sm' | 'md' | 'lg' | 'md' | Height and padding scale. |
| leftIcon | ReactNode | Icon rendered before the label. | |
| rightIcon | ReactNode | Icon rendered after the label. | |
| loading | boolean | false | Shows a spinner and disables interaction. |
| disabled | boolean | false | Native disabled state. |
| ...rest | ButtonHTMLAttributes<HTMLButtonElement> | Every native <button> attribute (type, onClick, form…). |