Skip to main contentCarbon Design System

Progress bar

Color

ElementPropertyColor token
Labeltext color
$text-primary
Helper texttext color
$text-helper
Trackbackground
$border-subtle
Bar: activebackground
$border-interactive
Bar: successbackground
$support-success
Icon: successfill
$support-success
Bar: errorbackground
$support-error
Icon: errorfill
$support-error
Progress bar status colors

Status colors

Typography

ElementFont-size (px/rem)Font-weightType token
Label14px / 0.875remRegular / 400
$label-01
Helper text12px / 0.75remRegular / 400
$helper-text-01

Structure

Depending on the use case, progress bar can have three ways for text alignment: default, inline, and indented. The width of a progress bar can be customized appropriately for its context. The minimum width of a progress bar is 48px and keep its width to a maximum of six columns when possible.

ElementPropertypx / remSpacing token
Label (top aligned)padding-bottom8 / 0.5
$spacing-03
Helper textpadding-top8 / 0.5
$spacing-03
Label (left aligned)padding-right16 / 1
$spacing-05
Structure and spacing measurements for the progress bar.

Structure and spacing measurements the progress bar | px / rem

Structure and spacing measurements for the progress bar with an icon.

Structure and spacing measurements the progress bar with an icon | px / rem

Sizes

There are two sizes for the progress bar height, big and small.

SizeHeight px / rem
Big8 / 0.5
Small4 / 0.25
Progress bar sizes