Menu
Esc
DocsGitHub TR

Components

Stepper

Shows where the user is in a flow of steps, such as a sign-up or a wizard.

Open in Figma

Playground

  1. 1Account
  2. 2Profile
  3. 3Team
  4. 4Billing

Figma variant

Stepper Item 1: 🕹 State=Success
Stepper Item 2: 🕹 State=Current
Stepper Item 3: 🕹 State=Next
Stepper Item 4: 🕹 State=Next

Step states

Done steps are success circles, the current step is a primary soft pill with its number and title, the next steps are surface/level-3 circles.

  1. 1Account
  2. 2Profile
  3. 3Team
  4. 4Review

Tokens

StateBackgroundText
Success--color-success--color-on-success
Current--color-primary-soft--color-primary
Next--color-surface-level-3--color-foreground-medium-emphasis
Gap--space-tiny—

Notes from Figma

  • The numbers and titles are an unbound 12px Medium style; code uses ui/text small/bold, with the title in capitals as in Figma.
  • The Success text color is raw; code uses on-success.
  • The steps are not clickable in Figma; code renders an ordered list without buttons.

Figma to code

FigmaReact
.Stepper Item 🕹 State = Success / Current / Nextsteps before / at / after current
Stepper Item 1 … 6steps