Compact KPI
Use center values for dashboard cards and provide a descriptive progressbar label.
82%
Policy match
46%
Open reviews
12%
Escalations
<ProgressCircle value={82} segmented valueSize="lg" label="Policy match" />Segmented health score
Enable segmented colors when the ring and center value should follow percentage thresholds.
68%
<ProgressCircle value={68} segmented valueSize="xl" valueTone="auto" label="Readiness" />Custom value formatting
Use valueFormatter when the center label is not a percentage.
7/10
<ProgressCircle value={7} max={10} valueSize="lg" valueFormatter={(value) => `${value}/10`} />