Feedback / StatusTimeline
StatusTimeline
Where an incident is right now. Done steps get a cobalt tick, the current step boils, the rest are pencilled in.
Server ComponentWCAG AASince v0.1
- Reported, done9:02 AM
- Dispatched, done9:04 AM
- En route, current step6 min away
- Resolved, not startedWaiting
import { StatusTimeline } from "@plop-ui/react";
<StatusTimeline
steps={["Reported", "Dispatched", "En route", "Resolved"]}
times={["9:02 AM", "9:04 AM", "6 min away", "Waiting"]}
current={2}
/>Change every prop live in the playground.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| current required | number | — | Index of the current step. Steps before it are done; after it, pending. Use `steps.length` when everything is done. |
| steps required | readonly (string | TimelineStep)[] | — | Step labels, in order. |
| className | string | none | — |
| id | string | none | — |
| label | string | "Progress" | Accessible name of the list. |
| orientation | "horizontal" | "vertical" | "auto" | none | `auto` (default) is horizontal and turns vertical in narrow containers. |
| statusText | { done: string; current: string; pending: string; } | none | Status words read by screen readers. |
| times | readonly (string | undefined)[] | none | Times under each step, matched by index (overrides `step.time`). |
Use it well
DoKeep it to 3 to 6 steps people would say out loud.
Don'tUse it for a form wizard. It shows where something is, not where you are.
Accessibility
- An <ol> with aria-current="step" on the current step.
- Each step's status is written in text ("done", "current step", "not started").
- A Server Component: no client JavaScript.