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.

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

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

Interactive states

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

Examples of focus, hover, error, and disabled states 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