ProgressIndicator
ProgressIndicator + ProgressStep — pattern.
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 { ProgressIndicator } from "@avala/design"; <ProgressIndicator status="incomplete" status="incomplete">ProgressIndicator</ProgressIndicator>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
patterns-progressindicator--defaultOpen in Storybook →
When to use
- Multi-step wizards (dataset import, model training setup, onboarding).
- Any flow where the user benefits from seeing all steps and which step they're on.
- When step labels are short — long labels go vertical.
When not to use
- Single-bar progress (file upload, build progress) → use `ProgressBar`.
- Hierarchical breadcrumb-style nav → use `Breadcrumb`.
- A simple "X of Y" counter → render plain text; the chrome cost isn't worth it.