Stepper
The Stepper displays a horizontal 3-step progress indicator. Step icons change automatically based on the step prop — completed steps show green checkmarks, the active step shows a spinner or checkmark, and future steps are grayed out.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| step | Number | 1 | Current active step — 1, 2, or 3 |
| isFailed | Boolean | false | When true and step is 3, shows a red warning icon instead of a checkmark |
| step1Label | String | 'Discovered' | Label for the first step |
| step2Label | String | 'In Progress' | Label for the second step |
| step3Label | String | 'All Clear' | Label for the third step |
Step 1 — Discovered
html
<Stepper :step="1" />Discovered
In Progress
All Clear
Step 2 — In Progress
html
<Stepper :step="2" />Discovered
In Progress
All Clear
Step 3 — All Clear
html
<Stepper :step="3" />Discovered
In Progress
All Clear
Step 3 — Failed
html
<Stepper :step="3" :isFailed="true" step3Label="Failed" />Discovered
In Progress
Failed