Display
Steps
A numbered sequence, as a rail — one thing after another, with a rule through them.
Usage
When to reach for it
import { Steps } from '@misoto22/design'Notes
A numbered sequence, as a rail.
The shape a pipeline actually has: one thing after another, each with a name and a line of detail, and a rule running through them so the eye reads them as one process rather than as five unrelated rows. It is the figure a technical post reaches for most often after a diagram, and it is NOT a diagram — nothing branches, nothing points at anything, and drawing it with boxes and arrows says otherwise.
The connector is drawn on the ITEM rather than as a full-height line behind the markers, so it starts under one and stops above the next instead of running through both — and so the last step has no tail hanging off it. That is the detail that separates a rail from a list with a border on it.
An <ol>, because the order is the content. aria-current="step" marks the filled one, which is the only thing here a screen reader could not otherwise infer from the order it is read in.
Anatomy
| Element | Description |
|---|---|
| Railrequired | The <ol>, carrying --step-size — one number that three rules read: the marker’s own box, where the connector starts, and where it is centred. |
| Markerrequired | A 2rem circle per step, aria-hidden: the position number, or a blank hairline node when marker is "rule". Filled with --accent for the current one. |
| Connector | A hairline drawn on every item but the last, placed absolutely from the foot of that marker to the foot of its row — so it spans the gap rather than running behind the markers, and no tail hangs off the end of the sequence. |
| Titlerequired | step.title, at 15px in the interface face. The step’s name — a noun, not a description of what happens in it. |
| Note | step.note, a mono line under the title: what the step is made of, what it costs, what it uses. |
Best practices
Do
- Use marker="rule" for a sequence of states. “Queued, running, done” is an order rather than an instruction list, and a digit in front of each one tells the reader they are steps to perform.
- Mark at most one step current: it is the one thing the rail states rather than draws, and two filled markers put the process in two places at once.
- Pass label when no heading names the sequence — it is the list’s only name, so without it the rail is announced as five items belonging to nothing.
- Retune the rail through --step-size on the list rather than by restyling the marker: the marker box, the connector’s start and its centring all read that one number, and moving one of the three leaves the line beginning in mid-air.
Don’t
- A fork drawn here is a fork the reader never sees. The connector runs from each step to the next one in the array and to nothing else, so two branches flatten into four consecutive steps and the choice between them leaves the figure entirely.
- steps={[]} renders null rather than an empty rail, so a list filtered down to nothing leaves a heading standing over a gap unless the call site checks the length itself.
- Nothing here is clickable and the props spread onto the <ol>, so an onClick meant for a step lands on the whole list. A sequence the reader is meant to move through is a Breadcrumb or a Tabs.
Examples
default
A pipeline as a rail: one thing after another, each with a noun for a name and a mono line of detail under it. The order is the content, so this is an ol — and label is the list's only name here, because no heading above it says what the sequence is. Exactly one step is current, which is the one thing the rail states rather than draws.
- Corpus
- Chunking
- Embedding
- Storage
- Retrieval
- Answer
states not instructions
The same rail without the digits. marker="rule" is for a sequence of STATES — queued, building, published is an order the process moves through, and a number in front of each one tells the reader they are steps to perform. The filled marker says where it has got to; a second current would put the release in two places at once.
- Queued
- Building
- Published
notes that carry code
note takes a node, not only a string, so a step can carry the exact command rather than a description of it. Keep it to one short line either way: the rail is a sequence, and a paragraph under a marker turns it back into the numbered list it exists to replace. Nothing here is clickable — the props spread onto the ol, so an onClick meant for a step lands on the whole list.
- Install
- Import the stylesheet
- Render
Accessibility
- An <ol>, because the order IS the content — a stack of divs says nothing about sequence.
- aria-current="step" marks the filled one, which is the only thing here a reader could not infer from the reading order.
- The markers and the connector are aria-hidden: the number is the list position, and screen readers already announce that.