Ready

Step Progress Bar

Step Progress Bars display the steps in a specific process and indicate the user's progression though the steps.

Ready

Step Progress Bar

Step Progress Bars display the steps in a specific process and indicate the user's progression though the steps.

Anatomy

  1. Step Buuton

  2. Step Line

Variants

  1. Default

  2. Vertical

States

  1. Default

  2. Hover

  3. Active

  4. Complete

Behaviors

The steps may be used as links to return to a previous step to review their content submission.

Responsive

  1. At the Xlarge, Large and Medium breakpoints, the step labels are visible

  2. At the Small breakpoint, the step labels become hidden

Best Practices

1

When to use

Use Step Progress Bars to break up larger processes into smaller tasks.

2

Active State

The Step Progress Bar use a is-active step to indicate the user's progress.

Do

Don't

Content

1

Labels

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.

Do

Don't

2

Order

Display steps in a logical order from left to right (or up to down).

Do

Don't

© 2026 Basis Technologies
© 2026 Basis Technologies
© 2026 Basis Technologies