Skip to main contentCarbon Design System

Progress indicator


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.

ElementPropertyColor token
Current iconfill$interactive
Complete iconfill$interactive
Incomplete iconfill$icon-primary
Current step linebackground-color$border-interactive
Incomplete step linebackground-color$border-subtle *
Labeltext color$text-primary
Optional labeltext color$text-secondary

* Denotes a contextual color token that will change values based on the layer it is placed on.

Interactive states

ElementPropertyColor token
Label:hovertext color$link-primary-hover
Examples of current, completed, and future steps for progress indicator

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


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


All icons can be found in the icons library.

ElementPropertypx / remSpacing token
Stepmin-width128 / 8
Iconheight, width16 / 1
margin-top, margin-right16 / 1$spacing-05
Labelmargin-top16 / 1$spacing-05
Structure and spacing for progress indicator

Structure and spacing measurements for progress indicator | px / rem