About cookies on this site Our websites require some cookies to function properly (required). In addition, other cookies may be used with your consent to analyze site usage, improve the user experience and for advertising. For more information, please review your options. By visiting our website, you agree to our processing of information as described in IBM’sprivacy statement. To provide a smooth navigation, your cookie preferences will be shared across the IBM web domains listed here.
Progress indicator
The following page documents visual specifications such as color, typography, structure, and size.
Color
A progress indicator step may be complete, current, or not started. The following table describes the color tokens used for each of these states.
| Element | Property | Color token |
|---|---|---|
| Complete icon | fill | $interactive |
| Current icon | fill | $interactive |
| Not started icon | fill | $icon-primary |
| Active step line | background-color | $border-interactive |
| Inactive step line | background-color | $border-subtle * |
| Label | text color | $text-primary |
| Helper text | text color | $text-secondary |
- 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
Interactive states
| Element | Property | Color token |
|---|---|---|
| Step: focus | border | $focus |
| Label: hover | text color | $link-primary-hover |
| Icon: error | fill | $support-error |
| Icon: disabled | fill | $icon-disabled |
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.
| 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 |
Structure
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
Feedback
Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.
