Progress Steps

Status

Component checklist

Key points

• Progress steps indicate to the user how many steps there are in a flow
• There are two variations of this component — the usage is based on the number of steps
• Progress steps should sit at the top of the page so it clearly indicates the stage of a flow
• Each step has a different state: default, active, and completed
• Progress steps are only available in horizontal orientation
• Steps 1-5 include labels and are clickable
• Steps 6 or more use simplified indicators without labels and are not clickable

Use progress steps to show users where they are in a multi-step process or flow.