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.
Use descriptive labels that clearly indicate what actions or options the user can expect at each step of the process. Keep labels short--two or three words maximum in most cases. Use title cases without periods, commas, or other unnecessary punctuation.
Display steps in a logical order from left to right (or up to down).
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/