<baht-progress-ring>
Circular single-value “percent used” ring — the round counterpart to <baht-progress>’s linear bar. Center shows the rounded percentage; an optional caption reads what it’s a percentage of.
Tones
Events (name)
<baht-progress-ring value="80" label="of budget used"></baht-progress-ring>
<baht-progress-ring value="45" tone="success" label="complete"></baht-progress-ring>
<baht-progress-ring value="92" tone="danger" label="of storage used"></baht-progress-ring>| Name | Type | Default | Description |
|---|---|---|---|
value | number | 0 | 0–100, clamped |
tone | ProgressRingTone | 'primary' | Ring color (primary | success | warning | danger) |
label | string | '' | Caption under the percentage, e.g. "of budget used" |
size | number | 112 | Rendered pixel size (square) |