Progress Stepper

Progress Stepper

Definition

The progress stepper illustrates a user’s progress through a series of steps to complete a process, and optionally, provides secondary navigation through the process. It provides the user with answers to these process questions: How many steps? Where am I now? What's next? and What's complete?

The progress stepper can be interactive, allowing a user to complete a process. In this case, use buttons for primary navigation, and the steps as secondary, direct navigation. A non-interactive progress stepper simply indicates status of a process.

An interactive progress stepper is most useful for a 2-7 step process. However, the number of steps should be as few as possible.

Common Characteristics

Individual steps in all progress steppers may be incomplete vs. complete, valid vs. error, and required vs. optional.

Interactive Steppers

Interactive progress steppers should be used with buttons as primary navigation. Use a contained button for forward navigation, and a text or outlined button for backward navigation.

  1. Step 1
  2. Step 2
  3. Step 3 Long Label
  4. Step 4
  5. Step 5
Step 1

Interactive progress stepper with primary and secondary navigation.

Small Screens

On small screens (XS breakpoint), only the current step label is displayed.

  1. Step 1
  2. Step 2
  3. Step 3 Long Label
  4. Step 4
  5. Step 5
Step 1

Interactive progress stepper with primary and secondary navigation.

Non-interactive Steppers

  1. Step 1
  2. Step 2
  3. Step 3 Long Label
Step 2