Button

Eight variants × three sizes × four states. At most one Brand button per page — every other primary action falls back to the neutral inverted --primary button. Use Tertiary / Link inside dense toolbars or rows.

Hierarchy

Read top → bottom: order of emphasis on a page.

Brand · max 1 per page
Primary · neutral
Secondary
Tertiary · ghost
Danger · strong
Danger · subtle
Warning
Link
Variant × State (Sm · 24px)
Sm
Default
Hover
Active
Disabled
Primary
Secondary
Tertiary
Danger · Strong
Danger · Subtle
Warning
Brand
Link
Variant × State (Default · 28px)
Default
Default
Hover
Active
Disabled
Primary
Secondary
Tertiary
Danger · Strong
Danger · Subtle
Warning
Brand
Link
Variant × State (Large · 32px)
Large
Default
Hover
Active
Disabled
Primary
Secondary
Brand
Icon button
Button group
Page composition rule

A page may contain at most one Brand button. The toolbar example below: Generate spec is the brand CTA; the rest are neutral.

design-tokens.css