Progress steps

Progress steps are used to indicate progress in a ‘wizard’-type flow broken into multiple steps.

Labels in progess steps are not clickable.

Height

The default height is 84px but when the parent is taller, the content is placed in the vertical center.

Vertical padding above and below should be 24px. Vertical padding between text label and bullet should be 6px.

Width

Connecting bars are 180px wide by default but should shrink on smaller screens (or when there are multiple steps).

Horizontal padding on the container should be 24px on each side.

Connecting bars

Connecting bars should touch to the center of bullets, meaning bullets “hang” off the connecting bars.

Color versions

Colored versions can be used to indicate a status per step.

Neutral grey

Blue

Warning

Error/warning

Confirmation