StatusIndicator
Carbon-spec status indicator. Shows a colored dot + optional label for entity status (active / idle / error / unknown / 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 { StatusIndicator } from "@avala/design"; <StatusIndicator tone="active" size="md">StatusIndicator</StatusIndicator>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
patterns-statusindicator--defaultOpen in Storybook →
When to use
- Inline status of an entity in a row, card, or detail view (Active / Idle / Error / Pending).
- Anywhere the user needs a quick visual read on real-time state.
- In tables, place the indicator in its own status column for fast scanning.
When not to use
- Counts or short pill-shaped numbers ("12 items", "NEW") → use `Badge`.
- Categorical tagging (project: SemSeg, type: 3D box) → use `Tag`.
- AI / generated content marker → use `AILabel` or `Slug`.
- Transient feedback after an action → use `Notification`.