IconIndicator
Carbon's IconIndicator. A token-coloured Carbon icon + optional label, sized for dense UIs (tables, cards, list rows). Distinct from StatusIndicator (a coloured dot + padded label row) and from the bare Icon primitive (no semantic status colouring).
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 { IconIndicator } from "@avala/design"; <IconIndicator size="md">IconIndicator</IconIndicator>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-iconindicator--defaultOpen in Storybook →
When to use
- Status meaning best conveyed by a recognisable Carbon icon (
CheckmarkFilled,WarningFilled,ErrorFilled,InformationFilled). - Compact list-row affordance for completion / failure / warning / info.
- Status-icon legends with optional caption text.
When not to use
- Status conveyed by an abstract shape → use `ShapeIndicator`.
- Live entity state with padded surface → use `StatusIndicator`.
- Just an icon with token tone, no semantic status → use `Icon`.
- Notification count overlaying another element → use `BadgeIndicator`.