Stepper

Plain CSS implementation of the Figma Steper section, node 1192:5628. Public API uses the corrected name Stepper.

Default

1 Servidor
2 Servidor
3 Servidor
4 Servidor
5 Servidor
6 Servidor
7 Servidor
8 Servidor

The Figma source uses dotted point connectors between 64px stage blocks. The public API keeps the generic Stepper name and uses upcoming for the Figma Enable status.

Statuses

Checked
2 Active
3 Upcoming

1 Active
2 Enabled

Progress Flow

Project
Devices
3 Servers
4 Access
5 Review

Interactive Markup

Display-only steppers should use static content inside each list item. Clickable steppers may use .sui-stepper__action, but route changes, validation, disabled rules, and current-step updates are owned by the consuming application.

Overflow

Project data
2 Equipment selection
3 Network configuration
4 Final review

Labels are ellipsized and the root can scroll horizontally so connector alignment remains stable.

Dark Theme

Done
2 Current
3 Next

CSS API

<ol class="sui-stepper" aria-label="Progress">
  <li class="sui-stepper__step sui-stepper__step--checked">
    <span class="sui-stepper__marker" aria-hidden="true"></span>
    <span class="sui-stepper__label">Done</span>
  </li>
  <li class="sui-stepper__step sui-stepper__step--active" aria-current="step">
    <span class="sui-stepper__marker">2</span>
    <span class="sui-stepper__label">Current</span>
  </li>
  <li class="sui-stepper__step sui-stepper__step--upcoming">
    <span class="sui-stepper__marker">3</span>
    <span class="sui-stepper__label">Next</span>
  </li>
</ol>