Button
A clickable button with multiple variants, sizes, shapes, and loading state.
Variants
Sizes
Shapes
Loading
Full Width
Elevation
primary and danger variants ship with a gradient surface + inset highlight + micro-lift hover by default (elevation="raised"). Use elevation="flat" for dense surfaces where the lift would feel noisy (toolbars, inline action rows). outline / ghost / secondary are always flat regardless.
Mobile considerations
- All hover effects (lift + brightness) are guarded by
@media (hover: hover)so they don't get "stuck" after a tap on touch devices. - Active press uses
--tui-duration-instant(80ms) for immediate feedback. - Buttons meet the 44×44px tap-target minimum at
size="md"andlg. Forsize="sm", ensure the surrounding row gives at least 8px vertical padding.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'primary' | Visual style variant |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the button |
shape | 'square' | 'rounded' | 'pill' | 'square' | Shape of the button |
elevation | 'flat' | 'raised' | 'raised' (primary/danger), 'flat' (others) | Visual elevation. Raised adds gradient + inset + hover lift. |
loading | boolean | false | Shows a spinner and disables the button |
startIcon | ReactNode | - | Icon placed before the children |
endIcon | ReactNode | - | Icon placed after the children |
fullWidth | boolean | false | Stretches the button to fill its container |
disabled | boolean | false | Disables the button |
Also accepts all standard <button> HTML attributes.