Buttons
Variants
Sizes
With Icon - Left
With Icon - Right
Disabled
Badges & Tags
Status - Filled
Default Success Warning Error
Default Success Warning Error
Highlight - Outlined
Most Popular Best Value Recommended Top Choice
Most Popular Best Value Recommended Top Choice
Category - Filled
Design Development Marketing Business Finance
Design Development Marketing Business Finance
With Icons
Default Success Warning Error
Most Popular Best Value Design Marketing
Eyebrow
Theme: light
Eyebrow Headline
Eyebrow Headline
Eyebrow Headline
Eyebrow Headline
Eyebrow Headline
Theme: surface
Eyebrow Headline
Eyebrow Headline
Eyebrow Headline
Eyebrow Headline
Eyebrow Headline
Theme: dark
Eyebrow Headline
Eyebrow Headline
Eyebrow Headline
Eyebrow Headline
Eyebrow Headline
Theme: brand
Eyebrow Headline
Eyebrow Headline
Eyebrow Headline
Eyebrow Headline
Eyebrow Headline
Divider
asset=none (default) — solid / dashed / dotted
asset=icon — repeating flow, space-xs gap
asset=image — full-bleed band (fixed height, object-fit: cover)
Token Test
Swap --color-brand-primary in
tokens.css and all button/badge colours update.