Navigation
Step Item
Step Item is a single step within a multi-step Stepper, showing progress through a linear process (checkout, onboarding, setup wizard).
State (Completed/Current/Upcoming) — 3 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Purpose
Step Item is a single step within a multi-step Stepper, showing progress through a linear process (checkout, onboarding, setup wizard).
When to use
Linear, ordered processes where showing overall progress helps the user.
When not to use
Non-linear or optional-order tasks.
Accessibility
aria-current="step" on the active step, ideally an aria-label summarizing "Step 3 of 5."
Common mistakes
Allowing users to click ahead to Upcoming steps that require earlier steps first.
Properties
State as variants — structurally verified so only Completed shows a checkmark. Label (text), per-state Number (text).
Tokens used
semantic/action/primarysemantic/surface/defaultsemantic/border/default