Done
Components
Button.
Six variants. Always labelled "imperative singular verb + noun" — never just the verb. 32px high, 4px radius, 14px label, optional 16px icon.
Variants
React variantFigma TypeWhen to use
primaryPrimaryThe one action you want users to take. One per view.secondaryNeutralPaired with primary for cancel or secondary flows.subtle—Low-emphasis actions, toolbars. No Figma equivalent.destructiveDangerIrreversible actions — delete, remove, reset.successSuccessConfirm, approve, complete. Positive final step.The Figma component uses the Type property — its values (Primary, Neutral, Danger, Success) map to the React variant names above. Dev Mode shows the correct React snippet via Code Connect.
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" | "success";
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;
};