Ring
A circular progress ring for a fraction, sized like an icon.
Group: Feedback · Kind: native · in the lite catalog
Preview
Section titled “Preview”example
size · sm
size · default
size · lg
tone · neutral
tone · success
tone · warning
tone · danger
Platforms
Section titled “Platforms”The same specimen painted by React, SwiftUI, Compose and gpui.
Variants
Section titled “Variants”tone · info
| Prop | Type | Required | Bindable | Description |
|---|---|---|---|---|
value |
number |
yes | yes | The fraction 0 to 1. |
size |
sm | default | lg |
– | – | Diameter class. Default "default". |
tone |
neutral | primary | success | warning | danger | info |
– | – | The arc colour tone. Default "primary". |
label |
string |
– | – | An accessibility label. |
Events
Section titled “Events”None.
None.
Children
Section titled “Children”none
A2UI basic mapping
Section titled “A2UI basic mapping”No basic catalog component maps here.
Built from
Section titled “Built from”A native component: every renderer paints it directly.
Accessibility
Section titled “Accessibility”Role: progressbar
progressbar (value 0..1 as percent)
Not focusable; no keys.
Theming
Section titled “Theming”Recipe parts: Ring/root Ring/track Ring/fill Ring/label
Keyed by: size tone :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover
Related
Section titled “Related”Badge · Alert · Chip · EmptyState · Progress · Meter · Spinner · Skeleton