Completed Step
Progress Line
Active Step
Default Step
Default
Vertical
Default
Default: Hover
Active
Complete
Complete: Hover
Return Link
The steps may be used as links to return to a previous step to review their content submission.
Responsive
At the
Xlarge,LargeandMediumMD breakpoints, the step labels are visibleAt the
Smallbreakpoint, the step labels become hidden
1. Labels
The Step Progress Bar should use descriptive step labels and should use a is-active step to indicate the user's progress.
2. Short and Concise
The Step Progress Bar labels should be short and concise.
3. Ordering
The steps should be displayed in logical order from left to right to illustrate the movement through the steps.
Related Components
Related Patterns
Additional Reading
Progress Trackers in UX Design https://uxplanet.org/progress-trackers-in-ux-design-4319cef1c600
Progress Trackers in Web Design: Examples and Best Practices https://www.smashingmagazine.com/2010/01/progress-trackers-in-web-design-examples-and-best-design-practices/