Done
Check icon + .is-done.
-
Done
Horizontal progress steps — done, current, and pending with optional purpose line.
Live
Complete these steps to start applying.
<div class="ui-stepper">
<p class="ui-stepper__purpose">Complete these steps to start applying.</p>
<ol class="ui-stepper__track">
<li class="ui-stepper__step is-done">…</li>
<li class="ui-stepper__step is-current" aria-current="step">…</li>
<li class="ui-stepper__step">…</li>
</ol>
</div>import { Stepper } from 'caustica-design/core'
import 'caustica-design/css'
<Stepper
purpose="Complete these steps to start applying."
steps={[
{ id: 'cv', label: 'Import CV', status: 'done' },
{ id: 'job', label: 'Add a job', status: 'done' },
{ id: 'review', label: 'Review', icon: 'send', status: 'current' },
{ id: 'history', label: 'History', icon: 'clipboard', status: 'pending' },
]}
/>Check icon + .is-done.
aria-current="step" + .is-current.
Default step without done/current modifiers.
aria-current="step".purpose text explains the overall flow for screen readers and sighted users.| Class | Description |
|---|---|
.ui-stepper / __purpose / __track |
Root + purpose + list. |
.ui-stepper__step / .is-done / .is-current |
Step states. |
.ui-stepper__rail / .is-filled |
Connector between steps. |
.ui-stepper__body / __node / __label |
Step content. |
.ui-stepper__check / __icon |
Node icons. |
From src/core/Stepper.tsx — also exports Animate for motion wrappers.
| Prop | Type | Default | Description |
|---|---|---|---|
steps |
StepperStep[] |
— | id, label, status, optional icon (required). |
purpose |
string |
— | Optional purpose line above the track. |
status |
'pending' | 'current' | 'done' |
— | Per-step status on StepperStep. |