Progress bar: style
The following page documents visual specifications, including colour, typography, structure and size.
| Element | Property | Colour reference | Colour token |
|---|---|---|---|
| Container | background colour |
Expressive pale overlay
|
$progress-background |
| border colour |
Expressive pale overlay
|
$progress-border | |
| Bar | background colour |
Expressive deep
|
$progress-bar-background |
| Label | text colour |
Text secondary
|
$progress-label |
| Helper | text colour |
Text muted
|
$progress-helper |
| Note | text colour |
Text primary
|
$progress-note |
Interactive state colour
| State | Element | Property | Colour reference | Colour token |
|---|---|---|---|---|
| Success | Bar | background colour |
Feedback border success
|
$progress-bar-background-success |
| Error | Bar | background colour |
Feedback border error
|
$progress-bar-background-error |
| Inactive | Bar | background colour |
Disabled 03
|
$progress-bar-background-inactive |
Validation message
Validation message
Required validation message
Validation message
Progress note
Validation message
Progress note
Validation message