ShapeIndicator
Carbon's ShapeIndicator. A token-driven shape (circle / square / triangle / diamond) + optional label, conveying state in dense UIs where a full StatusIndicator (a dot + padded label row) is too heavy.
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 { ShapeIndicator } from "@avala/design"; <ShapeIndicator size="md">ShapeIndicator</ShapeIndicator>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-shapeindicator--defaultOpen in Storybook →
When to use
- Dense table cells where you need to convey state at a glance and the host caller can pair shape with status semantics (circle/square/triangle/diamond).
- Status legends in dashboards (matches Carbon's "shape ↔ status" convention).
- A pre-icon-set baseline in low-data-cost surfaces (no Carbon icon imports needed).
When not to use
- Live entity state with descriptive text → use `StatusIndicator`.
- Status conveyed by a recognisable Carbon icon → use `IconIndicator`.
- Notification count overlaying another element → use `BadgeIndicator`.