Spec

Min height 22px
Padding sm 2px 8px
Padding md 4px 12px
Padding lg 8px 16px
Selected focus ring 0 0 0 2px var(--c-focus)
Chip heights All removable chips use 44px minimum touch target
Accessibility Use badges as informative labels; removable chips require a labeled remove button

Primary

sm Primary Large

Secondary

sm Secondary Large

Outline

sm Outline Large

Subtle

sm Subtle Large

Selected

Combine with any variant — ring 2px --c-focus

Selected Selected Selected

Status badges

Useful for alerts/toasts labels: success · warning · error · info

Success Warning Error Info

Chips / Removable badges

Mobile-first removable chip with size variants sm · md · lg

Marketing
Product
Design System