ProgressRing

A full-circle completion ring, the Gauge's sibling: a muted track ring, a tone-colored value arc revealed clockwise from 12 o'clock with rounded caps, the whole-percent readout centered inside, and an optional label below the graphic. The same 0-100 value contract, tone axis, and rounding rules as Gauge, in the circular anatomy that reads as "completion" rather than "level".
iOS
Android
Web
tsx
<ProgressRing value={72} label="Complete" />

Props

Prop
Description
value
required
number
The value to display, 0-100.
label
string
A short caption beneath the number (e.g. "Complete").
primary
boolean
Tone of the value arc (pick one; default primary). Precedence when several are passed: success > warning > destructive (first match wins).
success
boolean
Tone of the value arc (pick one; default primary). Precedence when several are passed: success > warning > destructive (first match wins).
warning
boolean
Tone of the value arc (pick one; default primary). Precedence when several are passed: success > warning > destructive (first match wins).
destructive
boolean
Tone of the value arc (pick one; default primary). Precedence when several are passed: success > warning > destructive (first match wins).
compact
boolean
Density (omit for the default 120 diameter; compact is 96).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
For sizing/composition only.

Do & Don’t

ProgressRing

Don’t
A bordered circle with no track and no readout gives no baseline to read the fill against and no exact value.
Do
Put a muted track behind the value arc, the percent readout in the ring's center, and the label below the graphic.
← PieChart
RadarChart →