BadgeIndicator
Carbon's BadgeIndicator. Number-or-dot badge that overlays a host element (typically a button or icon) — used for notification counts on bell icons, unread-message counts on inbox triggers, and pending-review counts on QC affordances.
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 { BadgeIndicator } from "@avala/design"; <BadgeIndicator tone="error" mode="count" position="top-right">BadgeIndicator</BadgeIndicator>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-badgeindicator--defaultOpen in Storybook →
When to use
- Notification dot or count over an icon button (bell, inbox, sessions).
- Pending-action count over a tab or sidebar entry.
- Live unread / new-since-last-visit affordances.
When not to use
- Stand-alone status pill (no host overlay) → use `Badge`.
- Categorical chip → use `Tag`.
- Status indicator inline with a label → use `ShapeIndicator`, `IconIndicator`, or `StatusIndicator`.