Progress indicator

A progress indicator step may be complete, current, or not started. The following table describes the color tokens used for each of these states.

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

Examples of completed, current, 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.

Element	Font-size (px/rem)	Font-weight	Type token
Label	14 / 0.875	Regular / 400	`$body-compact-01`
Helper text	12 / 0.75	Regular / 400	`$label-01`

All icons can be found in the icons library.

Element	Property	px / rem	Spacing token
Step	min-width	128 / 8	–
Icon	height, width	16 / 1	–
	margin-top, margin-right	16 / 1	`$spacing-05`
Label	margin-top	16 / 1	`$spacing-05`

Structure and spacing measurements for progress indicator | px / rem

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Color