Stepper
Progress through a multi-step flow. Numbered discs derive their status from current — complete steps seal in aurum with a check, the current step rings and pulses, upcoming steps stay muted. The connector between them fills gold as each step completes, animating on the glide spring (instant under reduced motion). Pass statuses to override a step, e.g. to raise an error.
Horizontal
The default layout. As current advances the completed discs seal and the connector fill grows left-to-right toward the active step — a gold trail of progress.
- 1RecipientAddress or code
- 2AmountValue + asset
- 3Network feeConfirmation speed
- 4ReviewVerify details
- 5BroadcastSign & send
<Stepper steps={steps} current={0} />--ch-accent--ch-surface--ch-border--ch-fg-faint
First step active; every connector empty.
- RecipientAddress or code
- AmountValue + asset
- 3Network feeConfirmation speed
- 4ReviewVerify details
- 5BroadcastSign & send
<Stepper steps={steps} current={2} />--ch-accent--ch-accent-fg--ch-border--ch-fg
Two steps sealed; the fill reaches the active third disc.
- RecipientAddress or code
- AmountValue + asset
- Network feeConfirmation speed
- ReviewVerify details
- 5BroadcastSign & send
<Stepper steps={steps} current={4} />--ch-accent--ch-accent-fg--ch-fg-muted
All but the last complete; the last disc rings, awaiting broadcast.
Vertical
orientation="vertical" stacks the steps with the connector running down the disc rail. Descriptions sit beside each label — the register for wizards and settings flows.
- RecipientAddress or code
- 2AmountValue + asset
- 3Network feeConfirmation speed
- 4ReviewVerify details
- 5BroadcastSign & send
<Stepper steps={steps} current={1} orientation="vertical" />--ch-accent--ch-surface--ch-border--ch-fg-muted
Recipient sealed; Amount active and pulsing.
- RecipientAddress or code
- AmountValue + asset
- Network feeConfirmation speed
- 4ReviewVerify details
- 5BroadcastSign & send
<Stepper steps={steps} current={3} orientation="vertical" />--ch-accent--ch-accent-fg--ch-border--ch-fg
Three steps sealed; the rail fills down to Review.
Error state
A statuses entry overrides the derived status for one step. Marking a step error paints its disc danger with an alert glyph and turns its label red, while the surrounding steps keep their current-derived status — the connector into an errored step stays unfilled until it is resolved.
- RecipientAddress or code
- AmountValue + asset
- Network feeConfirmation speed
- 4ReviewVerify details
- 5BroadcastSign & send
<Stepper steps={steps} current={2} statuses={{ fee: "error" }} />--ch-danger--ch-danger-muted--ch-accent--ch-border
current=2, but the fee step is forced to error (e.g. rate estimation failed).
- Generate
- Record
- Verify
- 4Confirm
<Stepper steps={steps} current={2} orientation="vertical" statuses={{ verify: "error" }} />--ch-danger--ch-danger-muted--ch-accent
The override travels across layouts unchanged.
Sizes
sm rides inline chrome and tight panels; md is the working default for full-page flows. Disc, numerals, labels, and connector offset all scale together.
- Generate
- Record
- 3Verify
- 4Confirm
<Stepper steps={steps} current={2} size="sm" />--ch-accent--ch-font-size-xs--ch-border
Compact discs and 11px labels.
- Generate
- Record
- 3Verify
- 4Confirm
<Stepper steps={steps} current={2} size="md" />--ch-accent--ch-font-size-sm--ch-border
Default — larger discs and sm labels.
Across themes
A vertical stepper mid-flow under dark, light, and Harbor Mode — the aurum fill and the sealed discs hold their treasury register on every layer.
- Generate
- Record
- 3Verify
- 4Confirm
<Stepper steps={steps} current={2} orientation="vertical" size="sm" />--ch-accent--ch-accent-fg--ch-border--ch-fg