ds
Components
Steps

Steps

Progress through a flow: numbered, vertical and compact.

Sourceorders-db
Schema14 tables
DestinationChoose a warehouse
Schedule
Review

Code

<ol class="steps" aria-label="New pipeline">
  <li class="done"><span>Source<small>orders-db</small></span></li>
  <li class="done"><span>Schema<small>14 tables</small></span></li>
  <li aria-current="step"><span>Destination<small>Choose a warehouse</small></span></li>
  <li><span>Schedule</span></li>
  <li><span>Review</span></li>
</ol>

An ordered list, so the count comes for free. Done steps are filled with a check and the line after them turns accent, the current step is ringed, and the rest are outlines. A small under each name says what was chosen, which saves going back to check. On a phone only the current step keeps its name.

Vertical

Create a service account
In Snowflake, create a user with key-pair auth and the role LOADER.
Allow our IPs
Add 13.232.40.0/24 and 13.232.41.0/24 to the network policy.
Test the connection
We read one row from INFORMATION_SCHEMA and write nothing.
Pick a default schema

Code

<ol class="steps vert" aria-label="Connect a warehouse">
  <li class="done"><span>Create a service account</span><p>In Snowflake, create a user with key-pair auth and the role <code>LOADER</code>.</p></li>
  <li class="done"><span>Allow our IPs</span><p>Add 13.232.40.0/24 and 13.232.41.0/24 to the network policy.</p></li>
  <li aria-current="step"><span>Test the connection</span><p>We read one row from <code>INFORMATION_SCHEMA</code> and write nothing.</p><div class="btn-row"><button class="btn sm primary">Run test</button><button class="btn sm ghost">Back</button></div></li>
  <li><span>Pick a default schema</span></li>
</ol>

For setup guides where each step needs a sentence or a button. The rail runs down the left between the circles.

A failed step

Build
Test
MigrateLock timeout
Release

Code

<ol class="steps" aria-label="Deploy">
  <li class="done"><span>Build</span></li>
  <li class="done"><span>Test</span></li>
  <li class="err" aria-current="step"><span>Migrate<small>Lock timeout</small></span></li>
  <li><span>Release</span></li>
</ol>

Dots

Welcome
Invite your team
Connect a source
Done

Code

<ol class="steps dots" aria-label="Step 2 of 4">
  <li class="done"><span>Welcome</span></li>
  <li aria-current="step"><span>Invite your team</span></li>
  <li><span>Connect a source</span></li>
  <li><span>Done</span></li>
</ol>

For onboarding cards and dialogs where the names do not fit. The names stay in the markup for screen readers; the current dot stretches into a pill.

API

Class	On	What it does
`.steps`	ol	Horizontal steps with numbers and connecting lines.
`.done`	li	Completed: filled, with a check.
`aria-current="step"`	li	The current step.
`.err`	li	A step that failed.
`span > small`	li	A second line under the name.
`.vert`	.steps	Vertical, with a <p> and buttons under each step.
`.dots`	.steps	Dots only. Names are kept for screen readers.

Three to six steps.
Let people go back to a done step.
Names that are nouns: Source, Schema, Schedule.

Don't

Steps for a single form. Show the form.
Hiding which step failed.
Numbering optional steps.

Accessibility

aria-current="step" is read out as "current step". Label the list with the name of the flow.
Done and failed are shown by shape as well as colour: a check and an exclamation mark.