Progress Indicators

Progress indicators are a family of related components which all provide visual indication of how a process happens.

Progress Steps

This component indicates to the user how many steps there are in a flow. There are two variations of this component based on if there are more or less than five steps.

Key Points

Progress steps should sit at the top of page so it clearly indicates the stage of a flow

There are two variations of this component; the usage is based on number of steps

Each step has a different state; default, active and completed

Usage

The progress stepper should sit at the top of the flow, between the breadcrumb and the page title.

Steps 1 - 5

If there are less than five steps in the process use the Progress Steps 1-5 component. These components make use of the additional space to include supporting labels.

Each step should have a clickable hit state, so the user can manually move through the flow.

Keep each label concise and related to the page title.

Progress Steps 1 -5

Example of a component for less than five steps.

Steps 5 or more

When there are more than five steps the display is more simplifed with each step being a small dash line, supporting labels are removed.

As these steps are more condensed the user cannot click on each step to use through the flow. An additional button group would be required in the flow to account for this.

Progress Steps 5+

Example of a seven step flow.

States

Both components use the same colours to indidate the state of the component.

States

L to R: Icons for each of the states