Swimlanes | Sodium design system

Lanes

When to use it

Use: The order of a handful of steps and the system each runs in: a sync from source to warehouse to dashboard.
Use: Where a job hands back: an acknowledgement, a retry that returns to the queue.
Not for: When each step started and how long it took; that is a timeline, and a step's width here is lanes, not time.
Not for: Numbers over time. Use Chart.
Not for: More than five systems or eight steps; split the flow, or list it as a table.

6 rules

Must: Set tone: 'accent' on at most one step, the one the view is about; leave the rest on the well. Because the yellow block is the one thing to look at, and two of them make the reader choose.
Never: Give a step its own edge or a status colour; every step keeps the one --line edge, and an outcome goes in meta as a word. Because state is fill and word only, so a green or dark edge is a second code beside the yellow that the reader has to learn, and colour alone is not a word.
Must: Pass steps in the order they run, one per row; a step that runs in parallel is its own row too. Because rows are order, read top to bottom, and the connectors join each step to the one before it.
Never: Stretch a step across lanes to show it took longer; a step spans the systems it touches. Because the columns are systems, so a long step drawn wide says it ran in the warehouse when it did not.
Must: Give it a label that says what moves where: "Nightly sync, source to dashboard". Because it is the figure's caption, the name a screen reader gives the ordered list of steps.
Should: Name lanes and steps in a word or two in sentence case, and put numbers in meta. Because lane heads and step names are mono capitals in a quarter or a third of the width, and a number in the name cannot line up with the others.

5 checks

: It is a figure with an ordered list of steps; each reads its name, the lanes it spans and its meta.
: Lane heads and connectors are hidden from a screen reader, since every step already names its lanes.
: Step text clears 4.5:1 on both tones: ink on the yellow slab 12.8:1, yellow on the dark tint 9.0:1, ink on the well.
: An outcome is a word in meta, so it reads without colour.
: Connectors are --line-control, 3.7:1 on white, and end in a square.

7 edge cases

Step back to an earlier lane: An elbow runs down from the last step's end lane and back to the step's end edge.
Step in the next lane on: An elbow runs down and forward to the step's start edge.
Overlapping steps: No connector: the blocks stack --space-1 apart, so no two edges touch.
Long step name: Truncates with an ellipsis before the meta, which never shrinks.
Narrow width: Lanes share the width equally; at 390px a one-lane step of three holds a nine-letter name (TRANSFORM) whole, and its meta gives way first.
Right to left: Lanes run from the right; blocks and connectors mirror.
Reduced motion: Blocks and connectors are there at once.

5 props

14 tokens