Meter

Usage/quota bar for dashboards — a single fill or stacked segments with a legend.

Meter shows how much of a bounded quantity is in use — storage, seats, budget. Pass value/max for a single fill, or segments to stack several typed portions (e.g. storage used by images vs. documents) inside the same track. It renders with the native meter ARIA role, so screen readers report the current value automatically — distinct from Progress, which represents an ongoing operation rather than a static quantity.

Example

Preview

Seats used17 of 25

Storage76 of 100 GB

ImagesDocumentsOther

import { Meter } from '@officina/ui';

<Meter value={68} max={100} tone="accent" label="Seats used" valueLabel="17 of 25" />

<Meter
  max={100}
  label="Storage"
  valueLabel="76 of 100 GB"
  showLegend
  segments={[
    { value: 42, tone: 'accent', label: 'Images' },
    { value: 23, tone: 'info', label: 'Documents' },
    { value: 11, tone: 'warning', label: 'Other' },
  ]}
/>

API

Prop	Type	Default	Description
label	ReactNode	—	Visible label above the track.
max	number	100	Upper bound of the scale. Defaults to 100.
segments	MeterSegment[]	—	Multiple stacked segments (e.g. storage by type).
showLegend	boolean	false	Render a legend of segment labels below the track.
size	enum	md	Track thickness.
tone	enum	accent	Semantic colour for the single-value fill.
value	number	0	Single-value fill. Ignored when `segments` is provided.
valueLabel	ReactNode	—	Right-aligned value caption (e.g. "12 of 25 GB").

Example

API

On this page