Metrics & Status

ProgressCircle

Ring gauge for compact percent readouts such as batch completion, quota, or risk scores. Renders the rounded percentage in the center by default.

Props

ProgressCircle extends HTMLAttributes<HTMLDivElement>. Renders as role="progressbar".

ProgressCircleProps props

Prop	Type	Default	Description
`value`	`number`	—	Fill percentage, 0–100.
`size`	`number`	`44`	Overall width/height in px.
`strokeWidth`	`number`	`4`	Ring thickness.
`tone`	`ProgressTone`	`"primary"`	"primary" \| "ok" \| "warn" \| "err".
`children`	`ReactNode`	—	Center content. Defaults to the rounded percentage. Pass null to hide it.

72%

ProgressCircle tones

ProgressCircle custom center

72%

ProgressCircle sizes

ImportTSX

import { ProgressCircle } from "@solarius/onset";
import type { ProgressCircleProps, ProgressTone } from "@solarius/onset";