Step Button
Step Line
Default
Vertical
Default
Hover
Active
Complete
The steps may be used as links to return to a previous step to review their content submission.
At the Xlarge, Large and Medium breakpoints, the step labels are visible
At the Small breakpoint, the step labels become hidden
Use Step Progress Bars to break up larger processes into smaller tasks.
The Step Progress Bar use a is-active step to indicate the user's progress.
Do
Don't
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 sentence case.
Do
Don't
Display steps in a logical order from left to right (or top to bottom).
Do
Don't
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/
