Skip to main content

Color

All steps that have already 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.

ClassPropertySCSSHEX
.bx--progress-step svgfill$brand-01#3d70b2
.bx--progress-step--incomplete circlefill$ui-05#8897a2
.bx--progress-step--current .bx--progress-linebackground-color$brand-01#3d70b2
.bx--progress-step--incomplete .bx--progress-linebackground-color$ui-05#5a6872
.bx--progress-step--complete .bx--progress-labeltext color$brand-01#3d70b2
.bx--progress-step--incomplete .bx--progress-labeltext color$ui-05#5a6872


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 style
.bx--progress-step--complete.bx--progress-label14 / 0.875Semi-Bold / 600.bx--type-zeta
.bx--progress-step--incomplete.bx--progress-label14 / 0.875Normal / 400-

Structure

The checkmark icon can be found in the iconography library.

ClassPropertypx / remSpacing token
.bx--progress-step svgheight, width24 / 1.5-
.bx--progress-lineheight, border1px-
.bx--progress-stepmin-width112 / 7-
.bx--progress-step svgmargin-bottom8 / 0.5$spacing-xs
.bx--progress-labelwidth75%-

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-md

Structure and spacing for Progress Indicator Recommended structure and spacing measurements for Progress Indicator | px / rem