Components

Stepper

A horizontal progress trail through ordered steps. A 1px connector runs between square markers; completed steps fill with ink and show a check, and the active step's marker takes the accent.

Progress

Mark finished steps with is-complete and the current step with is-active. Steps after it stay in the default state.

Three steps
  1. 1Profile
  2. 2Rates
  3. 3Review
<ol class="ds-stepper">
  <li class="ds-stepper__step is-complete"><span class="ds-stepper__marker">1</span><span class="ds-stepper__label">Profile</span></li>
  <li class="ds-stepper__step is-active" aria-current="step"><span class="ds-stepper__marker">2</span><span class="ds-stepper__label">Rates</span></li>
  <li class="ds-stepper__step"><span class="ds-stepper__marker">3</span><span class="ds-stepper__label">Review</span></li>
</ol>

With descriptions · circle markers

Add a ds-stepper__desc under any label, and use the ds-stepper--circle modifier for round markers.

Round
  1. 1AccountSigned in
  2. 2EntitySelected
  3. 3PricingIn progress
  4. 4ConfirmPending
<ol class="ds-stepper ds-stepper--circle">
  <li class="ds-stepper__step is-complete"><span class="ds-stepper__marker">1</span><span class="ds-stepper__label">Account</span><span class="ds-stepper__desc">Signed in</span></li>
  <li class="ds-stepper__step is-complete"><span class="ds-stepper__marker">2</span><span class="ds-stepper__label">Entity</span><span class="ds-stepper__desc">Selected</span></li>
  <li class="ds-stepper__step is-active" aria-current="step"><span class="ds-stepper__marker">3</span><span class="ds-stepper__label">Pricing</span><span class="ds-stepper__desc">In progress</span></li>
  <li class="ds-stepper__step"><span class="ds-stepper__marker">4</span><span class="ds-stepper__label">Confirm</span><span class="ds-stepper__desc">Pending</span></li>
</ol>

Interactive

Click a step to advance the trail — earlier steps flip to is-complete and the clicked one to is-active.

Live
  1. 1Profile
  2. 2Rates
  3. 3Review
  4. 4Publish
<ol class="ds-stepper">
  <li class="ds-stepper__step is-active" aria-current="step"><span class="ds-stepper__marker">1</span><span class="ds-stepper__label">Profile</span></li>
  <li class="ds-stepper__step"><span class="ds-stepper__marker">2</span><span class="ds-stepper__label">Rates</span></li>
  <!-- mark earlier steps is-complete as the user advances -->
</ol>

React

Pass steps and the active index; every step before it is marked complete automatically.

<Stepper /> 
import { Stepper } from "@diametral/design-system/react";

<Stepper
  active={2}
  steps={[
    { label: "Account", description: "Signed in" },
    { label: "Entity", description: "Selected" },
    { label: "Pricing", description: "In progress" },
    { label: "Confirm", description: "Pending" },
  ]}
/>