How this works, not a percentage.
Process v1 — packages/design-system/src/components/process.css. A
compact sequence of stages for explaining a flow — "how this product/feature
works" — or, opted into deliberately, tracking one genuinely live step. Not a
progress bar; there's no percentage, no fill animation, just steps and their
relationship to each other.
.iz-process on an <ol> — the steps are a real, ordered sequence, not a <div> soup..iz-process__step, an <li> holding a .iz-process__marker, .iz-process__label, and an optional .iz-process__description..iz-process__connector, a plain aria-hidden="true" <li> between steps — decoration, never counted content.data-state="complete" | "current" | "upcoming" on a step — entirely optional. No attribute at all is the neutral/explanatory default.data-orientation="vertical" on .iz-process — default is horizontal.The default — every step reads as equally informational.
No data-state at all. Right for "how this works" copy, a dashboard
flow explainer, an onboarding overview shown before anything has actually started —
there is no step genuinely "in progress" yet, so none is marked current.
- 1 Companies Enter via import
- 2 Enrichment Matched against registry data
- 3 Review Flagged rows need a human
- 4 Published Visible across the workspace
<ol class="iz-process" aria-label="How company data enters the system">
<li class="iz-process__step">
<span class="iz-process__marker">1</span>
<span class="iz-process__label">Companies</span>
<span class="iz-process__description">Enter via import</span>
</li>
<li class="iz-process__connector" aria-hidden="true"></li>
<li class="iz-process__step">...</li>
</ol>Opt in only for a genuine live tracker.
data-state colors each marker and label — Success-tinted for
complete, Green for current, muted for
upcoming. Reach for it in a checkout or onboarding progress view where
one step is actually in progress right now — not to decorate an explanatory list
that has no real "current" step.
- 1 Account
- 2 Workspace
- 3 Billing
- 4 Invite team
<li class="iz-process__step" data-state="complete">...</li>
<li class="iz-process__step" data-state="current" aria-current="step">...</li>
<li class="iz-process__step" data-state="upcoming">...</li>- 1 Account
- 2 Workspace
- 3 Billing
Same markup, one attribute.
data-orientation="vertical" on .iz-process — useful in a
narrow sidebar or a mobile layout where a horizontal row would wrap awkwardly.
Descriptions read comfortably alongside each step instead of stacked beneath it.
- 1 Order placed Sep 2, 09:14
- 2 Packed In progress at the warehouse
- 3 Shipped
- 4 Delivered
<ol class="iz-process" data-orientation="vertical" aria-label="Order fulfillment">
...
</ol>Do / Don't.
<ol> with real <li> steps · leave
data-state off for explanatory copy · set
aria-current="step" alongside data-state="current" on a
genuine live tracker · keep labels to a word or two.
current at a time · use it as a substitute for
Tabs navigation · rely on marker color alone
to communicate state.
A real list, plus aria-current for the one live step.
<ol> of <li> steps — a screen reader announcing "list, N items" plus each item's position is exactly the right semantics for free, no ARIA roles invented..iz-process__connector items are aria-hidden="true" — decorative rules between steps, never announced as list content.aria-current="step" on the one <li> that's genuinely in progress. data-state="current" is color only — it cannot speak state to assistive tech on its own, the same division of labor as aria-selected on .iz-tab.aria-current entirely when there's no live step — an explanatory list has nothing to mark as "current."