Meter
A usage track: a bar of coloured segments against a maximum, with a caption and a value.
Group: Feedback · Kind: macro · in the lite catalog
Preview
Section titled “Preview”example
Storage650 MB of 1 GB
Platforms
Section titled “Platforms”The same specimen painted by React, SwiftUI, Compose and gpui.
| Prop | Type | Required | Bindable | Description |
|---|---|---|---|---|
segments |
[segment] |
yes | – | The slices in order. |
max |
number |
– | – | The full amount. Default 100. |
label |
string |
– | – | A caption before the track. |
value |
string |
– | – | A formatted value after the track. |
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”Accessibility
Section titled “Accessibility”Role: meter
meter (value of max, labelled by its label)
Not focusable; no keys.
Theming
Section titled “Theming”Recipe parts: Meter/root Meter/header Meter/label Meter/value Meter/track Meter/segment
Keyed by: tone :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover
Related
Section titled “Related”Text · Badge · Alert · Chip · EmptyState · Progress · Ring · Spinner