Back to Components

Display

Meter

Discrete level indicator (battery / signal / score). Distinct from ProgressBar — meter shows a measured value on a fixed scale, not loading progression.

Examples

Tones

<Meter value={0.8} />
<Meter value={0.8} tone="success" />
<Meter value={0.4} tone="warn" />
<Meter value={0.2} tone="danger" />

Custom segments

<Meter value={3} max={7} segments={7} />

Props

PropTypeDefaultDescription
valuenumber0Current value (0..max).
maxnumber1Maximum value.
segmentsnumber5Number of ticks to render.
tone'default' | 'success' | 'warn' | 'danger''default'Color of the active segments.
size'sm' | 'md''md'Tick dimension.

Install

CLI

npx @a3tai/mittsu add meter