Stepper

TYPES

Number or dot

The number variant labels each circle with its step index; the dot variant is the same anatomy with the number omitted.

ELEMENT

Left, left-right, right, and End

Each circle is its own building block with its own line segment(s) — Left has a line only after it, left-right has a line on both sides, right has a line only before it, and End stands alone with no line and no label.

STATES

Done, active, and inactive

A step's status colors both its circle and its own line segment — cyan once done, dark gray while active, and light gray while inactive. Active is the only status with a filled center dot in the Dot variant.

TOKENS & TYPOGRAPHY

Implementation bindings

COMPONENT STRUCTURE

The Figma source also documents per-step hover states distinguishing reachable vs. unreachable inactive steps — simplified here to a single Inactive status. Flagged as follow-up work if that distinction needs to be interactive.