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.
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { Badge } from "@avala/design"; <Badge variant="subtle" tone="neutral" size="md">Badge</Badge>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-badge--defaultOpen in Storybook →
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
Notificationpattern.