Progress steps

Style

Progress steps contain at least three step indicators. They are positioned on a thin horizontal or vertical line and organized sequentially from left to right or top to bottom.

Visual elements

Progress steps display circles or icons that indicate where a user is in the completion process. The appearance of these states change as a user moves through each step of the task.

• Finished step - A green circle with a check mark indicates a user has completed a previous step.
• Current step - A bright red circle with a pink border indicates a user is viewing or completing the current step.
• Error step - A dark red circle with an exclamation mark indicates there is an issue a user should be aware of.
• Next or Final step - A white circle with a light gray border indicates the next or final step has not been visited yet.
• Progress bar - A dark gray bar in between Finished and Current steps indicates how much progress a user has made.

Text labels

Every step must have a text label indicating what a user has and will accomplish. Each text label should be written clearly and use ideally one word to avoid crowding. If two words need to be used, set them in Sentence case only.

Helpful tip

Always try to write text labels as short as possible. If there are more than three steps, reduce the amount of characters.

Orientation

Horizontal

The Horizontal orientation can be stretched or squeezed to fit different desktop or tablet layouts, it can also be used on mobile if there are fewer steps with short text labels.

Warning

Do not write text labels with more than two words as space can become crowded when breakpoints get smaller or when text is translated.

Vertical

The Vertical orientation can be used on desktop or tablet if the content within needs to be positioned on the right instead of underneath. It can also be used on mobile if the horizontal orientation has more steps or text labels with more words.

Warning

Do not write text labels with more than two words as space can become crowded when breakpoints get smaller or when text is translated.

Responsive design

Progress steps mostly remain the same on large and small screens. When the horizontal orientation becomes crowded, it will switch to the vertical orientation.

Desktop

{}

Tablet

Mobile

Spacing