Gauge
Semicircular gauge for a headline attainment or utilization readout. Heavier than ProgressCircle; meant to be the focus of a card.
Props
Gauge extends HTMLAttributes<HTMLDivElement>. Renders as role="meter".
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Fill percentage, 0–100. |
size | number | 132 | Overall width in px. |
strokeWidth | number | 9 | Arc thickness. |
tone | ProgressTone | "primary" | "primary" | "ok" | "warn" | "err". |
target | number | — | Optional target/threshold marker on the arc, 0–100. |
children | ReactNode | — | Center content. Defaults to the rounded percentage. |
sub | ReactNode | — | Dim line under the center readout. |
startLabel | ReactNode | — | Label under the left arc end. |
endLabel | ReactNode | — | Label under the right arc end. |
Examples
Basic
With target
With sub and labels
Tone variants
import { Gauge } from "@solarius/onset";
import type { GaugeProps, ProgressTone } from "@solarius/onset";