A flat segmented progress indicator — a row of rounded dashes where filled dashes mark current and earlier steps.
Consolidate — merged into Stepper
This component no longer exists on its own. It is merged into Stepper (node
4337:11140), where its ten propNStepper booleans are now the Steps axis and the dash form is Type=Dash. Assessment for this pattern lives on the Stepper page.In Context
Stepper - Dash sits above multi-step flows to tell the user where they are — KYC wizards, onboarding carousels, checkout funnels. The dashed format reads as "position in a sequence" rather than "percent done".
Live Preview
Properties (proposed)
total
current
Figma (today)
highlighted2nd
visible slotsprop1–prop4 = true
DS Health
Reusable
Partial
Historical rating from the standalone assessment. This component is merged into Stepper — see that page for current DS Health.
Self-contained
Pass
Historical rating from the standalone assessment. This component is merged into Stepper — see that page for current DS Health.
Consistent
Warn
Historical rating from the standalone assessment. This component is merged into Stepper — see that page for current DS Health.
Composable
Partial
Historical rating from the standalone assessment. This component is merged into Stepper — see that page for current DS Health.
Behavior
| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| Default (current) | Yes | Yes | highlighted=1st…10th | Dashes 1…current fill #005CE5; dashes current+1…total fill #D2E5FF. |
| Completed | N/A | N/A | Not modeled | No distinct "all done" state. Once current === total the final dash just reuses the same brand blue — consider a positive-green variant when the whole flow finishes successfully. |
| Error | N/A | N/A | Not modeled | Flows that can fail mid-way (KYC rejected, upload failed) have no way to indicate which step errored. Add a per-dash status or a component-level error state. |
| Tappable step | N/A | N/A | Not modeled | Display-only today — no pressed or focused variant. If designers want to allow tapping a completed dash to return, that interaction needs spec'ing. |
Issues
- Merged into Stepper. v2.0: Confirmed by the component owner — this no longer exists as a standalone component. It is merged into Stepper (node
4337:11140), where its tenpropNStepperbooleans are now theStepsaxis and the dash form isType=Dash. This page is kept as a pointer; all assessment for this pattern lives on Stepper. (Family) C4 · Native Mappability
1.0.1 — September 2026Patch
Documentation backfill · node 18649:5223
Resolved issues recorded. 1 resolved issue on the Overview tab had no changelog row: Merged into Stepper.
Docs1.0.0 — April 2026Major
Initial Assessment · node 18649:5223
Verdict: Restructure — Collapse
Schemahighlighted = 1st…10th + 10 propNStepper booleans into current: Int + total: Int. Asset quality already clean (pure vector). OpenC1 — Layer naming — Dash layers at positions 7–10 are all labelled
C16th (copy-paste bug). Rename to 7th…10th. OpenC2 — Ordinal enum + boolean flags —
C2highlighted is ordinal (1st…10th) where a number belongs; 10 propNStepper booleans emulate what should be total: Int. Rename and collapse. OpenC4 — Native mapping — No platform primitive matches. Requires custom
C4EBStepperDash on both platforms. Consider unified EBStepper(style:) shared with Bullet and Circular. OpenC5 — Missing states — No completed-success, error, or tappable-step variants. Add
C5status: default | success | error and optional pressed/focused. OpenC6 — Asset quality — Pure vector rectangles bound to
C6main/stepper/color/* tokens. No raster. Ready. ReadyC7 — Code Connect — Blocked until the schema collapses to
C7current + total. Open