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
Styles
Stepper - Dash
DES DEV
Horizontal row of equal-width rounded dashes. Dashes 1…<code>current</code> render in brand blue (<code>bg</code>); dashes <code>current+1</code>…<code>total</code> render in track blue (<code>bg-track</code>). All fills are real vector rectangles bound to stepper tokens.
Properties (proposed)
total
current
status
Colors
Filled dash #005CE5
Empty dash #D2E5FF
Layout
Dash height 4
Gap between dashes 4
Corner radius 100 (pill)
Dash width flex-1
Stepper Dash — Colors
Dash-style step indicator. Filled dashes are brand-blue; empty dashes are pale-blue.
| Role | Token | Default |
|---|---|---|
| Filled dash | stepper/color/bg | #005CE5 |
| Empty dash | stepper/color/bg-track | #D2E5FF |
Property Mapping
| Figma Property | SwiftUI | Compose |
|---|---|---|
highlighted: 1st | … | 10th | current: Int (1…10) | current: Int |
prop1Stepper…prop10Steppers (Bool × 10) | total: Int (2…10) | total: Int |
| (not modeled) | status: default | success | error | status: EBStepperStatus |
| (not modeled) | orientation: horizontal | vertical | axis: Axis |
bg token | unchanged | EBColors.stepperBg |
bg-track token | unchanged | EBColors.stepperTrack |
Accessibility
| Requirement | iOS | Android |
|---|---|---|
| Progress role | Expose as a single .accessibilityElement() with the .progressbar trait, value Double(current) / Double(total), label "Step 2 of 4". | Wrap in Modifier.semantics { role = Role.ProgressBar; progressBarRangeInfo = ProgressBarRangeInfo(current.toFloat(), 0f..total.toFloat()) }. |
| Label announcement | VoiceOver should read "Step 2 of 4, 50%". Localize the substitutions. | TalkBack same — use stateDescription for the "Step X of Y" phrasing. |
| Non-decorative colors | Brand blue on track blue is a 3.1:1 non-text contrast ratio — passes WCAG 1.4.11. OK. | Same ratio. |
| Grouping | Use .accessibilityElement(children: .ignore) so VoiceOver hears one unified announcement, not N dash descriptions. | Use Modifier.semantics(mergeDescendants = true). |
| Dynamic Type / text scale | Stepper has no text, so Dynamic Type doesn't apply to the component itself. Labels paired above/below should scale. | Same — font scale applies to paired labels, not dashes. |
Criteria Scorecard
| ID | Criterion | Status | Notes |
|---|---|---|---|
| C1 | Layer Structure & Naming | Needs Refinement | Inner dash layers on slots 7–10 are all named 6th (copy-paste bug). Otherwise clean. |
| C2 | Variant & Property Naming | Requires Rework | highlighted = 1st…10th should be numeric current; 10 propNStepper booleans should collapse to total: Int. |
| C3 | Token Coverage | Ready | All fills bound to main/stepper/color/bg and main/stepper/color/bg-track. Gap uses space/space-4. Add bg-positive / bg-negative when status states land. |
| C4 | Native Mappability | Requires Rework | No native primitive. Custom HStack/Row of rounded rectangles. Small composable, but must be owned by the DS. |
| C5 | Interaction State Coverage | Requires Rework | Only default two-tone. Missing completed/success, error, and (optional) tappable-step pressed/focused. |
| C6 | Asset & Icon Quality | Ready | Pure vector rectangles — no raster assets. Resolution-independent, theme-able. Best-in-class for the Stepper family. |
| C7 | Code Connect Linkability | Not Mapped | Blocked until the ordinal enum and boolean slot flags collapse into current + total. |
Variants Inventory (10 total)
A single highlighted axis with 10 ordinal values (1st, 2nd, …, 10th) = 10 variants. Each variant additionally exposes 10 boolean propNStepper visibility flags (not counted in the variant total — they're instance props). The proposed architecture replaces all of them with current: Int + total: Int, producing 9 × 10 = 90 representable states with no boolean juggling.
| # | Node | highlighted | Dimensions | Notes |
|---|---|---|---|---|
| 1 | 18649:5224 | 1st | 268 × 4 | Dash 1 bg; 2–10 bg-track |
| 2 | 18649:5235 | 2nd | 268 × 4 | Dashes 1–2 bg; 3–10 bg-track |
| 3 | 18649:5246 | 3rd | 268 × 4 | Dashes 1–3 bg; 4–10 bg-track |
| 4 | 18649:5257 | 4th | 268 × 4 | Dashes 1–4 bg; 5–10 bg-track |
| 5 | 18649:5268 | 5th | 268 × 4 | Dashes 1–5 bg; 6–10 bg-track |
| 6 | 18649:5279 | 6th | 268 × 4 | Dashes 1–6 bg; 7–10 bg-track |
| 7 | 18649:5290 | 7th | 268 × 4 | Dashes 1–7 bg; 8–10 bg-track · inner layer mislabel 6th |
| 8 | 18649:5301 | 8th | 268 × 4 | Dashes 1–8 bg; 9–10 bg-track · inner layer mislabel 6th |
| 9 | 18649:5312 | 9th | 268 × 4 | Dashes 1–9 bg; 10 bg-track · inner layer mislabel 6th |
| 10 | 18649:5323 | 10th | 268 × 4 | All 10 dashes bg · inner layer mislabel 6th |
1.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