Badge
Compact, read-only information
Use Badge for a status, category, count, or short piece of metadata. It never receives focus or triggers an action.
DefaultDraft
With indicatorActive
LargeEnterprise
AccentNew
Semantic tones
Meaning stays consistent across themes
Pair the tone with explicit text. Color supports the message and never carries it alone.
Approved
Needs review
Payment failed
Scheduled
Selectable Chip
Independent filter choices
Use a native button with aria-pressed. Each chip toggles independently and exposes its state to assistive technology.
Variants and states
Clear selection and availability
Selection changes both surface and icon visibility. Disabled controls retain a readable label.
Quiet
Medium
Disabled
Usage guidance
Keep information and interaction distinct.
A Badge describes something. A Chip changes a selection. Do not style a Badge like an interactive control or use a Chip for static status.
Next component: Field