Skip to main content

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.

Status Badge usage

Often used with

Last modified on July 3, 2026