Meter
meterDisplays a value within a known range using a semantic gauge bar.
Usage
Basic usage
Pass in value to render the measurement bar (default 0–100), and role=meter to express the static quantity ratio.
<Meter value={64} />Labels and values
label and showValue display descriptions and formatted values above the track.
<Meter value={72} label="Disk usage" showValue />Customized range
min/max Customize the upper and lower limits, and the values are converted into proportions according to the interval.
<Meter value={3.6} min={0} max={5} label="Rating" showValue />Different proportions
The proportion is determined by value, and the width is calculated internally by Base UI.
<>
<Meter value={18} label="Power" showValue />
<Meter value={100} label="Completion" showValue />
</>When to use
Use Meter for current disk, battery, quota, or other capacity. Meter communicates how full a quantity is now through role="meter"; Progress communicates advancement of a task.
Import
import { Meter } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| value* | number | — | Current value. |
| min | number | 0 | Lower bound. |
| max | number | 100 | Upper bound. |
| showValue | boolean | false | Shows the formatted value. |
| className | string | — | Custom class, commonly used for width. |
Slots
| Slot | Type | Description |
|---|---|---|
| label | ReactNode | Optional label such as "Disk usage". |
Pitfalls
Use Progress for an advancing task, not Meter. The parent determines bar width, so give it an explicit width.
Related
Stat · Statistic · Chart · Timeline · NumberTicker · WorldMap
Playground
<Meter value={64} label="Dosage" showValue />