Progress indicator

Color

All steps that have been completed are indicated by an outlined circle with a checkmark. The current step the user is on is indicated by a filled circle. Steps the user has not encountered yet, or future steps, are indicated by an outlined circle.

ClassPropertyColor token
.bx--progress-step--complete svgfill$interactive-04
.bx--progress-step--incomplete svgfill$interactive-04
.bx--progress-step--current
.bx--progress-line
background-color$interactive-04
.bx--progress-step--incomplete
.bx--progress-line
background-color$ui-03
.bx--progress-labeltext color$text-01
.bx--progress-optionaltext color$text-02

Interactive states

ClassPropertyColor token
.bx--progress-step:focusborder$focus
.bx--progress-label:hovertext color$link-01
.bx--progress__warningfill$support-01
Examples of current, completed, and future steps for progress indicator

Examples of current, completed, and future steps for progress indicator

Typography

Labels should be one to two words only, with a limit of 16 characters total per label. All labels should be set in sentence case.

ClassFont-size (px/rem)Font-weightType token
.bx--progress-label14 / 0.875Regular / 400$body-short-01
.bx--progress-optional14 / 0.875Regular / 400$label-01

Structure

The checkmark icon can be found in the iconography library.

ClassPropertypx / remSpacing token
.bx--progress-stepmin-width128 / 8
.bx--progress-step svgheight, width16 / 1
.bx--progress-step svgmargin-top, margin-right16 / 1$spacing-05
.bx--progress-labelmargin-top16 / 1$spacing-05
Structure and spacing for progress indicator

Structure and spacing measurements for progress indicator | px / rem

The following specs are not built into the progress indicator component but are recommended by design as the proper amount between progress indicator elements.

ClassPropertypx / remSpacing token
.bx--progressmargin16 / 1$spacing-05
Structure and spacing for progress indicator

Recommended structure and spacing measurements for progress indicator | px / rem