Components
Buttons
Five kinds, one feel. The black oval is the one thing to do on a screen; frosted chips are everything else. Buttons change colour on hover — they never lift or move.
Kinds
Sizes
sm for tables and dense bars · md everywhere · lg for sign-in and empty states.
States
Press “Save” — the button shows it is working, then confirms. Disabled buttons stay visible but say why nearby.
Not saved yet
Icon buttons
Round, 38px (32px small). Always labelled — hover one to see its label. The bell shows an unread dot.
Bell: unread — click it
Search button
The frosted search chip with its shortcut.
Props
| Prop | Values | Default | What it does |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'link' | 'secondary' | Which kind of button |
size | 'sm' | 'md' | 'lg' | 'md' | Height: 32/38 · 38/46 · 46/52 (chip/oval) |
icon / iconRight | icon name | — | Icon before or after the label |
loading | boolean | false | Shows a spinner and blocks repeat presses |
disabled | boolean | false | Faded and not pressable |
href | string | — | Renders a link that looks like a button |
full | boolean | false | Fills its container width |