When to use which
PrimaryOne per view — the single action you want taken. "Continue", "Create project", "Save".
SecondaryAlternate actions that sit next to a primary, or stand alone when no single action dominates the view. "Preview", "Cancel".
GhostLowest-emphasis, text-style actions — not a general-purpose secondary button. Reserve for dismissive or inline actions like "Skip" or "Not now", never for a page's main non-primary action.
Buttons
Icon buttons
Full-width
Tags
Accent · tinted
Accent · outlined
Neutral
Primary is solid-filled with the accent; secondary is outlined in the same accent, so the two read as a matched pair. Ghost drops the border and fill entirely — it reads as text with an underline on hover, signaling it's the lowest-priority action on the view. Keyboard focus on all three is the accent :focus-visible ring.