Skip to main contentCarbon Design System

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
.bx--progress-step--incomplete svgfill$interactive
.bx--progress-step--current
.bx--progress-line
background-color$border-interactive
.bx--progress-step--incomplete
.bx--progress-line
background-color$border-subtle
.bx--progress-labeltext color$text-primary
.bx--progress-optionaltext color$text-secondary

Interactive states

ClassPropertyColor token
.bx--progress-step:focusborder$focus
.bx--progress-label:hovertext color$link-primary
.bx--progress__warningfill$support-error
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.

ElementFont-size (px/rem)Font-weightType token
Label14 / 0.875Regular / 400$body-compact-01
Optional label12 / 0.75Regular / 400$label-01

Structure

The checkmark icon can be found in the icons 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