Badge
v1.0.0 | View in Storybook- Default: Optional icon and text in various decorative colors used to display a tag or metadata label.
- Status: Required icon and text in various semantic colors used to display a status indicator.
- Count: A label only used to display a count of items, typically nested in primitives like Button or Tabs.
- Dot: A small round dot used to display a status indicator, typically positioned on top of primitives like Avatar or Button.
- Closeable: Optional icon and text in secondary colors used to display a closeable item like a filter chip, typically displayed below a Toolbar or within Combobox or Select inputs.
Dos and don’ts
- Do use Badges to display metadata that can easily be sorted or filtered.
- Do take caution to avoid too many Badges in a single context as this can become overwhelming and confusing for the user.
- Do use an icon and label and correct semantic color pairing for the status Badge.
- Do use an overflow Badge to display a count of items that exceeds the available space, often used for closeable Badges.
- Don’t add interactivity to a Badge that would confuse it for a Button or link. Only closeable Badges should be interactive.
Behavior
- Default, status, count, and dot variants are informational and non-interactive unless product-specific rules say otherwise.
- Closeable badges may expose a dismiss control only; they must not behave like primary navigation or arbitrary Button actions.