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

Known limitation: Implemented in React as the internal state a Stepper Step derives structurally from child order + currentStep (components/ui/Stepper.tsx) — see /components/stepper for the canonical, publicly documented, implemented pattern. This entry remains Figma-facing prose about the underlying Navigation/Step Item component set; node 2024:2944 confirmed via direct Figma MCP inspection (CE-2J, 2026-09-14).

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

Known limitation

Implemented in React as the internal state a Stepper Step derives structurally from child order + currentStep (components/ui/Stepper.tsx) — see /components/stepper for the canonical, publicly documented, implemented pattern. This entry remains Figma-facing prose about the underlying Navigation/Step Item component set; node 2024:2944 confirmed via direct Figma MCP inspection (CE-2J, 2026-09-14).