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.

Variant

FigmaExternal link
🙈Ops! Can't find the image, but you could still try Figma.

Horizontal icon

FigmaExternal linkFigma design of horizontal icon stepper
Edit this page on GitHub