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
| Example | Token | Description |
|---|---|---|
| 24 | --rh-space-xl | 24px spacer |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
