Stepper

Navigation · src/components/Stepper/Stepper.tsx

Where somebody is in a process that has an order.

Steps, not views: use Tabs when the sections can be visited in any order. The state of each step is derived from current alone, so there is no way to render a step both done and in progress.

The done marker is a check rather than a colour change, and the step in progress carries aria-current="step", so the position survives without colour.

Import

import { Stepper } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
steps	StepperStep[]
current	number	Zero-based index of the step in progress. Everything before it reads as done.
orientation	'horizontal' | 'vertical'
label	string
className	string

Exported types

StepperStep