role progressbar
Progress bar draft v0.1.0
Shows how far a task has progressed, or that it is in progress when its length is unknown.
A progress bar fills a track from start to end as a task advances: an upload, an export, the steps of a setup. It has a visible label naming the task and, when the progress can be measured, an optional value in percent. When the length is unknown, the bar is indeterminate: a segment moves along the track to say that something is happening. It only reports: a progress bar is never a control.
Tokens
From packages/tokens/src/components/progress-bar.tokens.json. Path grammar: progress-bar.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (2)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
progress-bar.container.gap
Between the label row and the track.
|
dimension |
{space.4}
|
4px
|
--progress-bar-container-gap
|
progress-bar.container.column-gap
Between the label and the value.
|
dimension |
{space.8}
|
8px
|
--progress-bar-container-column-gap
|
Part label (2)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
progress-bar.label.color
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--progress-bar-label-color
|
progress-bar.label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--progress-bar-label-typography-font-family--progress-bar-label-typography-font-size--progress-bar-label-typography-font-weight--progress-bar-label-typography-line-height--progress-bar-label-typography-letter-spacing
|
Part value (2)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
progress-bar.value.color
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--progress-bar-value-color
|
progress-bar.value.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--progress-bar-value-typography-font-family--progress-bar-value-typography-font-size--progress-bar-value-typography-font-weight--progress-bar-value-typography-line-height--progress-bar-value-typography-letter-spacing
|
Part track (4)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
progress-bar.track.height.small
|
dimension |
{space.4}
|
4px
|
--progress-bar-track-height-small
|
progress-bar.track.height.medium
|
dimension |
{space.8}
|
8px
|
--progress-bar-track-height-medium
|
progress-bar.track.border-radius
|
dimension |
{corner-radius.full}
|
9999px
|
--progress-bar-track-border-radius
|
progress-bar.track.background
|
color |
{global.bg.base.neutral.3}
|
light
#ECE8E9
dark
#282828
|
--progress-bar-track-background
|
Part indicator (4)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
progress-bar.indicator.background
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--progress-bar-indicator-background
|
progress-bar.indicator.border-radius
|
dimension |
{corner-radius.full}
|
9999px
|
--progress-bar-indicator-border-radius
|
progress-bar.indicator.transition.duration
|
duration |
{duration.normal}
|
250ms
|
--progress-bar-indicator-transition-duration
|
progress-bar.indicator.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--progress-bar-indicator-transition-easing
|