Meter
A level within a known range, such as storage used or a score. Pick ProgressBar for work that moves towards done.
- Meter
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Meter
Memory
Monthly build minutesRunning low
Disk space on the shared project volumeAlmost full
Profile completeComplete
Dark theme, Meter
Memory
Monthly build minutesRunning low
Disk space on the shared project volumeAlmost full
Profile completeComplete
High contrast theme, Meter
Memory
Monthly build minutesRunning low
Disk space on the shared project volumeAlmost full
Profile completeComplete
UsageLink to the section Usage
import { Meter } from '@skribly/ui/feedback'<Meter label="Disk space" value={92} tone="danger" status="Almost full" valueLabel="92 of 100 GB" />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- A meter role named by its label, with the value and valueLabel read as text.
- A warning or danger tone takes a status word with its icon, linked to the meter as its description.
- The value text is also on screen, so the bar is never the only sign.
- The fill turns Highlight in forced colours.
This demo runs through axe in all three themes on every test run. See what the tests check.