ProgressIndicator
Shows progress through the steps of a multi-step flow
Category: navigation · WCAG 2.2-AA · steps, wizard, stepper, progress, navigation
Variants
- horizontal
- vertical
States
- complete
- current
- incomplete
Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | { label: string; description?: string }[] | — | Ordered list of steps |
currentIndex | number | — | Index of the current step (0-based) |
vertical | boolean | false | When true, lays the steps out vertically. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-accent--cascivo-color-accent-subtle--cascivo-color-text--cascivo-color-text-muted--cascivo-color-text-subtle--cascivo-color-text-on-accent--cascivo-color-border--cascivo-color-surface--cascivo-radius-full
When to use
- Showing progress through the discrete steps of a multi-step flow (wizard, checkout)
- Communicating which step is complete, current, and upcoming
- Laying out steps horizontally or vertically with optional descriptions
When not to use
- Continuous task progress with a percentage — use ProgressBar or ProgressCircle
- Indeterminate loading — use Spinner
How to build an accessible ProgressIndicator in React →
Examples
Horizontal
<ProgressIndicator steps={[{ label: 'Cart' }, { label: 'Shipping' }, { label: 'Payment' }]} currentIndex={1} />Vertical with descriptions
<ProgressIndicator vertical steps={[{ label: 'Account', description: 'Your details' }, { label: 'Confirm' }]} currentIndex={0} />Related components
- ProgressBar — ProgressBar shows continuous progress; this shows discrete steps