Progress tracker
A progress tracker displays the steps and progress through a journey.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { ProgressTracker } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| items * | readonly Stage[] | — | The stages in order. Each one needs an id, a label and a status of visited, current, unvisited or disabled. Exactly one stage should be current. |
Accessibility
What the component does for you, and what it needs from you.
- The tracker is an ordered list, so the number of stages and the position of each one are available without sight of the line.
- Status is carried in the markup as well as in colour, so the current stage is announced rather than only shown.
- A disabled stage is announced as unavailable rather than skipped, so the shape of the journey stays whole.