Progress ring

In context

Purpose

A ProgressRing is for a single, headline "out of whole" figure that deserves a focal shape — a score the user checks and wants to see climb. The arc gives the feeling; the centre gives the number.

Anatomy

• Track — the unfilled ring (a soft teal tint).
• Arc — the filled portion, progress 0–1 (clamps).
• Centre — any children: a number, a percent, a check glyph.
• Size / strokeWidth — diameter and thickness.

Variants

• Score — a number in the centre ("64").
• Complete — a full arc with a check glyph.
• Custom colour — override color / trackColor for a themed ring.

Code

import { ProgressRing } from '@daytwo/components'

<ProgressRing size={120} progress={0.64} label="Money health 64 of 100">
<Text style={{ fontSize: 28, fontWeight: '700' }}>64</Text>
</ProgressRing>

When to use

• A single headline score the user watches over time.
• A completion indicator where a circle beats a bar.

When NOT to use

• Comparing several targets — stack Meters instead.
• A tiny inline status — use a StatusLabel.
• Precise multi-value data — use a chart.

Good vs bad

• Good: a money-health ring showing "64" with "Up 6 this week" beneath — one focal number the owner returns to.
• Bad: five small rings in a row for five different metrics — rings don't compare well side by side; that's a job for meters or a chart.

Edge cases

Tokens used