Stepper
A stepper is a numbered step indicator for multi-step flows or to illustrate steps to be taken.
Examples
Basic usage
✓
Account
2
Profile
3
Preferences
4
Review
<nav class="cluster stepper" aria-label="Progress">
<span class="step">
<span class="badge is-circle is-success" aria-label="Complete">✓</span>
<span class="step-label">Account</span>
</span>
<hr class="divider stepper-connector" />
<span class="step" aria-current="step">
<span class="badge is-circle is-accent">2</span>
<span class="step-label">Profile</span>
</span>
<hr class="divider stepper-connector" />
<span class="step is-upcoming">
<span class="badge is-circle is-neutral">3</span>
<span class="step-label">Preferences</span>
</span>
<hr class="divider stepper-connector" />
<span class="step is-upcoming">
<span class="badge is-circle is-neutral">4</span>
<span class="step-label">Review</span>
</span>
</nav>
Checkmarks for completed steps
✓
Account
✓
Profile
3
Preferences
4
Review
<nav class="cluster stepper" aria-label="Progress">
<span class="step">
<span class="badge is-circle is-success" aria-label="Complete">✓</span>
<span class="step-label">Account</span>
</span>
<hr class="divider stepper-connector" />
<span class="step">
<span class="badge is-circle is-success" aria-label="Complete">✓</span>
<span class="step-label">Profile</span>
</span>
<hr class="divider stepper-connector" />
<span class="step" aria-current="step">
<span class="badge is-circle is-accent">3</span>
<span class="step-label">Preferences</span>
</span>
<hr class="divider stepper-connector" />
<span class="step is-upcoming">
<span class="badge is-circle is-neutral">4</span>
<span class="step-label">Review</span>
</span>
</nav>
Double-digit steps
✓
Intro
✓
Details
10
Review
11
Payment
12
Confirm
<nav class="cluster stepper" aria-label="Progress">
<span class="step">
<span class="badge is-circle is-success" aria-label="Complete">✓</span>
<span class="step-label">Intro</span>
</span>
<hr class="divider stepper-connector" />
<span class="step">
<span class="badge is-circle is-success" aria-label="Complete">✓</span>
<span class="step-label">Details</span>
</span>
<hr class="divider stepper-connector" />
<span class="step" aria-current="step">
<span class="badge is-circle is-accent">10</span>
<span class="step-label">Review</span>
</span>
<hr class="divider stepper-connector" />
<span class="step is-upcoming">
<span class="badge is-circle is-neutral">11</span>
<span class="step-label">Payment</span>
</span>
<hr class="divider stepper-connector" />
<span class="step is-upcoming">
<span class="badge is-circle is-neutral">12</span>
<span class="step-label">Confirm</span>
</span>
</nav>
Always-compact (badges only)
✓
Account
2
Profile
3
Review
<nav class="cluster stepper is-compact" aria-label="Progress">
<span class="step">
<span class="badge is-circle is-success" aria-label="Step 1, Account, complete"
>✓</span
>
<span class="step-label">Account</span>
</span>
<hr class="divider stepper-connector" />
<span class="step" aria-current="step">
<span class="badge is-circle is-accent" aria-label="Step 2, Profile, current"
>2</span
>
<span class="step-label">Profile</span>
</span>
<hr class="divider stepper-connector" />
<span class="step is-upcoming">
<span class="badge is-circle is-neutral" aria-label="Step 3, Review, upcoming"
>3</span
>
<span class="step-label">Review</span>
</span>
</nav>
Condensed (responsive collapse)
✓
Account
✓
Profile
3
Preferences
4
Review
<nav class="cluster stepper is-condensed" aria-label="Progress">
<span class="step">
<span class="badge is-circle is-success" aria-label="Step 1, Account, complete"
>✓</span
>
<span class="step-label">Account</span>
</span>
<hr class="divider stepper-connector" />
<span class="step">
<span class="badge is-circle is-success" aria-label="Step 2, Profile, complete"
>✓</span
>
<span class="step-label">Profile</span>
</span>
<hr class="divider stepper-connector" />
<span class="step" aria-current="step">
<span
class="badge is-circle is-accent"
aria-label="Step 3, Preferences, current"
>3</span
>
<span class="step-label">Preferences</span>
</span>
<hr class="divider stepper-connector" />
<span class="step is-upcoming">
<span class="badge is-circle is-neutral" aria-label="Step 4, Review, upcoming"
>4</span
>
<span class="step-label">Review</span>
</span>
</nav>
Source comments
Stepper -- numbered step indicator for multi-step flows (extra).
Built on top of .cluster, .badge.is-circle, and .divider. The
stepper itself is a .cluster with nowrap; this file handles the
step pair (.step), the label slot (.step-label), and the
stepper-specific divider modifier (.stepper-connector).
Markup:
<nav class="cluster stepper" aria-label="Progress">
<span class="step">
<span class="badge is-circle is-accent">1</span>
<span class="step-label">Account</span>
</span>
<hr class="divider stepper-connector">
<span class="step" aria-current="step">
<span class="badge is-circle is-accent">2</span>
<span class="step-label">Profile</span>
</span>
<hr class="divider stepper-connector">
<span class="step is-upcoming">
<span class="badge is-circle is-neutral">3</span>
<span class="step-label">Review</span>
</span>
</nav>
Archetype: composition reuse (P3 + P6). The stepper is mostly
.cluster + .badge + .divider with a thin layer of stepper-
specific glue. Consumers communicate state through badge color
(.is-success for completed, .is-accent for active, .is-neutral
for upcoming); the active step gets aria-current="step" and
brio auto-bolds its label.
Accessibility note for .is-compact / .is-condensed: hidden
labels are display: none, removed from the a11y tree. Add
aria-label on each badge describing step number AND name AND
state in compact mode -- "Step 2, Profile, current".
Container-query threshold (.is-condensed): hardcoded at 30rem
because container query lengths can't be var()-driven.
Consumers needing a different breakpoint write their own
@container rule.
Reference
Source: src/css/extras/stepper.css
Applies to
.stepper
Classes
Class Kind Description
.is-compactvariant Always hides labels, showing badges only at every width .is-condensedvariant Auto-hides labels at narrow container widths via container query
Slots
Slot Description
.stepper .stepStep pair containing a badge and optional label .stepper-connectorDivider connector line between steps
Tokens
Token Default Description
--stepper-gapvar(--ui-gutter-snug)Gap between the badge and label inside each step --stepper-connector-minvar(--space-lg)Minimum inline size of the divider connector between steps --cluster-wrapnowrapFlex-wrap override for the cluster composition