Skip to content
search icon
clear
Component Status

Steppers guide users through the steps of a task.

Guidelines

When a task is more advanced or complicated, visual help from a stepper lets the user know where they are in the current process.

Don't

  • Do not use with less than three steps.

Content

  • Avoid titles that are too long. Titles should be to the point and short, no more than three words if possible.
  • Keep the item labels as short as possible.
  • Use meaningful item labels that explain the function.
  • Item labels should be in the active tense.
  • Do not mix nouns and verbs. Pick one or the other.
  • Always use icons that clearly communicate their intended purpose.

Variations

Horizontal numeric

FigmaExternal linkFigma design of horizontal and numeric stepper

Horizontal icon

FigmaExternal linkFigma design of horizontal icon stepper

Vertical numeric

FigmaExternal linkFigma design of vertical  and numeric stepper

Vertical icon

FigmaExternal linkFigma design of vertical icon stepper
✏️ Edit this page on GitHub