Multi-step flows with the finish line always in view.
| Prop / event | Type | Notes |
|---|---|---|
| current | number | Zero-based index of the active step |
| orientation | horizontal · vertical | Row of steps, or a stacked column |
| Step.label / sub | string | Name and an optional supporting line |
| onStepClick | (index) => void | Navigate back to a completed step |
| done state | — | Steps before current show a warm check |
A Stepper maps a flow of discrete steps. For continuous completion of one task use Progress; for switching peer views use Tabs.
Keep it to a few clear steps, with the current one obvious.
Don't cram seven-plus steps in a row. Group or go vertical.
Mark finished steps with a check so progress is unmistakable.
Don't light every step as current. Exactly one is active.
Multi-step sign-up with the finish line always shown.
Cart → shipping → payment, one step at a time.
Vertical steps for wizards in a narrow panel.
| Token | Value | Role |
|---|---|---|
| --step-dot | 30px | Step marker diameter |
| --step-line | 2px | Connector thickness |
| --step-done | #FF7A00 | Done dot and connector |
| --step-current | #FF9D45 | Active number + warm halo |
| --step-idle | #2A2A30 | Upcoming border and line |
| --step-halo | 3px rgba(255,122,0,.15) | Ring on the current step |
<div class="o-stepper" role="list">
<div class="o-step is-done" role="listitem">
<span class="o-step__line"></span>
<span class="o-step__dot"><CheckIcon /></span>
<span class="o-step__label">Account</span>
</div>
<div class="o-step is-current" role="listitem">
<span class="o-step__line"></span>
<span class="o-step__dot">2</span>
<span class="o-step__label">Profile</span>
</div>
<div class="o-step" role="listitem">
<span class="o-step__dot">3</span><span class="o-step__label">Confirm</span>
</div>
</div>