Components
Button.
Five variants. Always labelled "imperative singular verb + noun" — never just the verb. 32px high, 4px radius, 14px label, optional 16px icon.
Variants
States
Default → Hover → Pressed → Selected → Disabled.
Default
Hover
Pressed
Selected
Disabled
Anatomy
Don't change paddings; the ribbon depends on the 32px height.
Height32px
Horizontal padding14px
Icon size16px (left of label)
Icon ↔ label gap8px
LabelManrope Medium 14 / 100%
Border1px solid same as background
Radius4px
Do & don't
Do — verb + noun, the user knows what gets removed.
Don't — verb on its own. What is being deleted?
Props (React)
type ButtonProps = {
variant?: "primary" | "secondary" | "subtle" | "destructive";
icon?: IconName; // optional leading icon
trailing?: boolean; // flip icon to right
loading?: boolean; // shows spinner, blocks clicks
disabled?: boolean;
pressed?: boolean; // toggle state — adds aria-pressed
children: ReactNode; // verb + noun, please
onClick?: (e) => void;
};