Design systemStepper
Shows where someone is in a short, fixed sequence of steps, across or down the page.
import { Stepper } from "@/ui";Stepper matches the Figma Stepper - Horizontal, Stepper - Vertical and Step Selector components. Use it for a setup flow with a few named steps that happen in order, like configuring a definition.
Horizontal
Use it across the top of a flow with three or four short step names. Click Next to move on. Finished steps are buttons that take you back.
<Stepper steps={["Configure", "Verify", "Validate"]} current={step} onStepClick={setStep} />Vertical
Use it down the side of a flow when the step names are longer.
<Stepper
orientation="vertical"
steps={["Configure Definition", "Verify Sources", "Verify Drill-Downs", "Validate Definition"]}
current={step}
onStepClick={setStep}
/>Progress
current is the index of the step in progress. Steps before it are done, and the lines between done steps turn blue. Set current to the number of steps to show everything done.
| Figma state | Icon | Label | Line before it |
|---|---|---|---|
| isIdle (upcoming) | Grey 500 ring | Grey 500 | Grey 400 |
| isNext (current) | Primary 500 ring | Primary 500 | Primary 500 |
| isActive (done) | Primary 500 filled check | Primary 500 | Primary 500 |
Anatomy
| Part | Spec |
|---|---|
| Step | 4px 8px padding, 4px gap, 16px Phosphor Circle or CheckCircle (fill), 14px medium label |
| Connector | 1px line, 40px long. Vertical lines sit under the centre of the icon. |
| Spacing | 4px between each step and line |
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
steps | string[] | [] | Step names, in order. |
current | number | 0 | Index of the step in progress. |
orientation | "horizontal" | "vertical" | "horizontal" | |
onStepClick | (index) => void | Makes finished steps buttons, so people can go back. Upcoming steps are never clickable. | |
className | string | "" | For layout only. |
Accessibility
- It is an ordered list, so screen readers say how many steps there are.
- The current step has
aria-current="step", and finished steps are announced as "done".
Not using Stepper yet
The Goals setup (NewGoalPage) and the skills-v2 run screens (SetupProgress, RunProgressBar) draw their own step indicators. Move them to Stepper when you next work on them.
Do and don't
- Do keep step names short: one or two words across, a short phrase down.
- Don't use a stepper for more than five or six steps, or for steps people can do in any order. Use Tabs for those.