Meter

Meter is a gauge primitive — a value within a known range, rendered as a horizontal bar with status color and optional label. Use for scores, completion rates, performance metrics, and health indicators.

Use it for

• Score displays (compliance score, health score)
• Performance metrics (page-speed, contrast ratio)
• Completion percentages on multi-criteria evaluations
• Health indicators (battery, capacity)

For task progress that updates over time, use ProgressBar — it's percent-only and process-oriented; Meter is value-within-range and judgment-oriented.

Import

import { Meter } from '@brikdesigns/bds';

Variants

Status colors

Four status colors map to fill colors via system tokens.

<Meter value={6} max={7} status="positive" label="Pass" />
<Meter value={4} max={7} status="warning" label="Fair" />
<Meter value={2} max={7} status="error" label="Fail" />
<Meter value={5} max={7} status="neutral" />

Sizes

Three sizes for different layout contexts.

Label position

above or below (default).

<Meter value={82} max={100} label="Score" labelPosition="above" />
<Meter value={82} max={100} label="Score" labelPosition="below" />

Custom value formatter

By default, Meter renders the value as {value}/{max}. Use valueFormatter to format differently — percentages, currency, custom strings.

<Meter
  value={0.73}
  max={1}
  status="warning"
  label="Completion"
  valueFormatter={(v) => `${Math.round(v * 100)}%`}
/>

Without value label

Set showValue={false} to hide the displayed value.

<Meter value={45} max={100} status="warning" showValue={false} />

When not to use

• Don't use Meter for measurable task progress. Use ProgressBar — process-oriented (percent done) reads differently from judgment-oriented (value-within-range).
• Don't use Meter for binary states. Active/inactive is a Badge; on/off is a Switch.
• Don't use Meter for time-series data. It's a single-value gauge — for trends use a chart.

Accessibility

• Renders a <div role="meter"> with aria-valuenow, aria-valuemin="0", aria-valuemax.
• The label (when provided) becomes the accessible name via aria-labelledby.
• Status is communicated via color and via the label/value text — never color alone.

API

Plus standard <div> HTML attributes (excluding children).

Related

• ProgressBar — task-progress sibling
• Badge — discrete status
• Counter — discrete numeric
• Storybook playground