How to build an accessible Badge in React
role="status" lets assistive tech expose the label as state; meaning is reinforced by text, never by color alone
When to use a Badge
- Labeling an item with a short, static status or category (e.g. "New", "Beta")
- Annotating an element with a count or state that is not interactive
When not to use it
- A removable or interactive chip (filters, selections) — use Tag
- A standalone system state with a colored dot — use Status
Accessibility
Role status, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <Badge onClick={removeFilter}>Active</Badge>
Prefer: <Tag onDismiss={removeFilter}>Active</Tag>
Badge is a non-interactive label; interactive/removable labels belong to Tag with proper button semantics
Example
<Badge>New</Badge>