Progress

Atom
Determinate and indeterminate progress bars: a rounded bar that reports how far a task has gotten, or that work is underway.
src/atoms/progress
View in Overlays & feedback

Playground

Every control sets a real prop of ProgressProps. The JSX below updates as you go.
Uploading tokens
64%
Props
value
number
64
showValue
boolean
indeterminate
boolean
segments
number
0
Tone
pick one
Size
pick one
children
string
JSX · ProgressProps
<Progress value={0.64} showValue>Uploading tokens</Progress>

Variants

8 examples from src/atoms/progress/progress.md, each rendered live from its own JSX.
Uploading files
60%
3 of 5 files
Labeled
<Progress showValue description="3 of 5 files" value={0.6}>Uploading files</Progress>
Indeterminate
<Progress accessibilityLabel="Connecting" indeterminate />
Small
<Progress small accessibilityLabel="Uploading files" value={0.6} />
Large
<Progress large accessibilityLabel="Uploading files" value={0.6} />
Storage used
Warning
The tone axis recolors the fill when a metric crosses a soft threshold. Pass warning for an amber bar; the track stays neutral.
<Progress warning value={0.85}>Storage used</Progress>
Over the WIP limit
Danger
Pass danger for a red bar when a hard limit is exceeded, e.g. a work-in-progress cap. Reinforce the state with copy, since the tone carries no new accessible value on its own.
<Progress danger value={1}>Over the WIP limit</Progress>
Uploading…
0%
Live
The determinate fill eases to each new value instead of jumping, so a bar wired to real progress fills smoothly. (Reduce Motion snaps instead.)
<Ticker values={[0, 0.15, 0.4, 0.65, 0.85, 1]}>
{(value) => (
<Progress showValue value={value}>Uploading…</Progress>
)}
</Ticker>
xs step, pinned to the start (320)
lg step, pinned to the start (512)
Bare, in an lg Container: fills it (512)
Measure
<Column snug>
<Progress xs start value={0.6}>xs step, pinned to the start (320)</Progress>
<Progress lg start value={0.6}>lg step, pinned to the start (512)</Progress>
<Container lg start><Progress value={0.6}>Bare, in an lg Container: fills it (512)</Progress></Container>
</Column>

Sizes

Uploading tokens
64%
small
Uploading tokens
64%
default
Uploading tokens
64%
large

Anatomy

Uploading tokens
64%
1
Label
2
Track
3
Fill
4
Value
Dimmed parts appear only in some states or variants.

Props

14 props on ProgressProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
7 props
value
number
–
Completion as a 0..1 fraction (clamped). Ignored when indeterminate. Defaults to 0.
segments
number
–
A fixed number of discrete dashes, filled by the same fractional value.
indeterminate
boolean
false
Indeterminate mode: ignore value and animate a sliding bar (a spinner on iOS).
children
ReactNode
–
Optional title line rendered ABOVE the bar. Supplying it (with or without a description/showValue) builds the stacked header inside the control, so the caller never hand-composes a Row/Column + Typography around the bar. This is the "components own their label anatomy" contract, mirroring Checkbox/Radio/Switch's description slot.
description
ReactNode
–
Optional muted secondary line rendered under the title.
showValue
boolean
false
Render the percent (derived from value) as a right-aligned readout on the title line. Indeterminate has no measurable value, so this renders nothing then.
status
ReactNode
–
A short status word on the title line, in the percent readout's place and type ("indeterminate", "strong", "paused"): what the bar means right now, where description is a sentence under the title. It shows while indeterminate too, and when both are passed the status wins the readout slot over showValue.
Tone axis
pick one
2 props
warning
boolean
false
danger
boolean
false
Size axis
pick one
5 props
small
boolean
false
large
boolean
false
accessibilityLabel
string
–
Accessible description of what is progressing.
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.
MeasureProps · width steps xxxs 192 · xxs 256 · xs 320 · sm 384 · md 448 · lg 512 · xl 576 · xxl 672 · xxxl 768 · wide 896 · wider 1024 · widest 1152 · page 1280, plus start to pin to the leading edge.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
Roles
progressbar
ARIA on web
aria-valuemax
aria-valuemin
aria-valuenow
From the docs
Name the task with string children, or pass accessibilityLabel when the visible title is omitted or contains rich content.
segments displays a fixed number of discrete 13×5 dashes with three pixels between them. It uses the same 0–1 value, intent fill and accessible percentage. Indeterminate wins over discrete segments; a labelled segmented meter retains its header.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Over the WIP limit
Web
control 10 · field 10 · card 16 · Instrument Sans
Over the WIP limit
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Over the WIP limit
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Progress accessibilityLabel="Uploading files" value={0.6} />
The bar fills the parent it is given; a step of its own (xs, lg, …, with start to pin it to the leading edge) or a Container step sets its measure.
Name the task with string children, or pass accessibilityLabel when the visible title is omitted or contains rich content.
segments displays a fixed number of discrete 13×5 dashes with three pixels between them. It uses the same 0–1 value, intent fill and accessible percentage. Indeterminate wins over discrete segments; a labelled segmented meter retains its header.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--fm
--ft
--ion
--sf4
--tx2

Related components