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 |
|
Current icon | fill |
|
Not started icon | fill |
|
Active step line | background-color |
|
Inactive step line | background-color |
|
Label | text color |
|
Helper text | text color |
|
- 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](/static/9d798c077600019b15226a3cd3336648/3cbba/progress-indicator-style-1.png)
Examples of completed, current, and future steps for progress indicator
Interactive states
Element | Property | Color token |
---|---|---|
Step: focus | border |
|
Label: hover | text color |
|
Icon: error | fill |
|
Icon: disabled | fill |
|
![Examples of focus, hover, error, and disabled states for progress indicator](/static/f1e259ccfc9789e6de1248d4f4ce331c/3cbba/progress-indicator-style-2.png)
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 |
|
Helper text | 12 / 0.75 | Regular / 400 |
|
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 |
| |
Label | margin-top | 16 / 1 |
|
![Structure and spacing for progress indicator](/static/4e32c3c1593c3b3763cc37a45c603245/3cbba/progress-indicator-style-3.png)
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.