← Components/primitives

Badge

Small visual marker for counts, status, or notifications. Carbon doesn't ship Badge as a distinct primitive in @carbon/react v11 (NotificationBadge is the closest). We ship it as a small status pill because consumer apps use it for unread counts, role markers, etc.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗
primitives-badge--defaultOpen all variants →

When to use

  • Unread counts (inbox, alerts), single-glyph status markers ("•" online), role/permission tags on user rows.
  • Overlay on top of an `Avatar` for status indicators ("online", "away").

When not to use

  • Filterable/dismissable categorical labels → use `Tag`.
  • Determinate progress → use `ProgressBar`.
  • Standalone notification banners → use the Notification pattern.