Button

currentglobalNew

@/components/Button · used in 210 files · last touched 2026-08-15

View SchemaWorksheet

Variants

Primary

Tonal

Secondary

Tertiary

Danger

Danger Light

Loading

Disabled

JSXlive from props
Loading highlighter…

Notes

  • Primary blue (#6875F5) is reserved for primary actions only — Single Signal Rule.
  • Do not set custom heights. h-[2.625rem] (42px) is the system touch target.
  • isDisabled greys out via gray-300/gray-400 — never recolor a disabled primary.
  • [user] Use Button variant=secondary for Cancel in modals — pair with FooterActionButtons.
  • [user] Use variant=tonal for the low-emphasis fill treatment (replaces the removed primary-light variant).

Related

Where used

196 render · 14 import-only