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.

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
Step:focusborder$focus
Label:hovertext color$link-primary-hover
Icon:errorfill$support-error
Icon:disabledfill$icon-disabled
Line:disabledbackground-color$border-disabled
Examples of current, completed, and future steps for progress indicator

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

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