Gauge

A semicircular dial: a 180 degree top arc (muted track plus a tone-colored value arc) for a 0-100 value, the percent readout in the open center of the semicircle, and an optional label below the graphic.
iOS
Android
Web
tsx
<Gauge value={72} label="Uptime" />

Props

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

Do & Don’t

Gauge

Don’t
An arc with no track and no number: there is 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 semicircle's open center, and the label below the graphic.
← FunnelChart
GeoMap →