Progress Steps
Progress Steps shows how many steps a flow has, and how far through it someone is.
Preview
Where you are in a sequence with a known end. Checkout, onboarding, a form in parts. Done steps carry a check, the current one carries its number, the rest wait.
Three kinds of marker in one row: done, current, upcoming. The row is 272 wide in all twelve variants, so the step count never changes the space it takes.
Step counts
Three, four or five steps. Five is the cap and the file has no sixth.
Every row is 272, so only the connector moves: 84 at three steps, 42.667 at four, 22 at five. Past five the component stops: a sixth would drop the connectors under 12 and the row would read as a dotted line. The description sends you to a Progress Bar with a step counter.
Progression
The same five steps at each position. The check replaces the number the moment a step is behind you.
The connector into the current marker is already brand coloured, so the line marks the step you are on, not the one you finished. There is no all done state: at Current 5 the fifth marker is still current, so a finished checkout needs something else on screen to say so.
Properties
Two axes, twelve variants. No text, no icons, no slots.
The grid is triangular, not square: Current cannot be higher than Steps, so three of the fifteen combinations do not exist. The numbers inside the markers are plain text with no property on them, so a flow that does not start at 1 is an override. There are no labels either.
Tokens
Five values, and one of them is the reason to look twice.
Success is the only token here that gets darker in dark theme while everything around it gets lighter, and the white check sits on that darker green. Check that pairing on a real screen. The done marker is success green but the line joining done markers is brand blue.
Guidelines
Five is the ceiling. At five the connector is still 22 wide and the row reads as a path from one circle to the next.
Do not add a sixth. The row stays 272, so every connector drops to 9.6 and the path turns into dashes between dots.
Use it when the number of steps is known before the user starts and will not change while they are inside. Checkout, onboarding, a form split into parts. Past five, use a Progress Bar with a step counter in text. Decide the count before you show the first step.