Meter

A known quantity within a range (storage, quota, password strength). Unlike ProgressBar, it isn't "progress".

Import

import { Meter } from '@marbleui/ui'

Props

<Meter>

Prop	Type	Default	Description
label	`ReactNode`	`—`
segments	`number`	`10`
thresholds	`{ warning: number; danger: number; }`	`{ warning: 70, danger: 90 }`	Percent thresholds where the color turns warning / danger (e.g. storage usage).
variant	`'bar' \| 'segmented'`	`'bar'`

Also accepts React Aria props (85).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Meter. Follow the primitive's docs for the full keyboard map.

Usage notes

Known quantity within a range, such as storage used, seats or password strength. It isn’t progress toward completion; for that use ProgressBar.

<Meter label="Storage" value={78} />
<Meter label="Seats" value={14} maxValue={15} valueLabel="14 of 15" />

Extends React Aria Meter: value, minValue (default 0), maxValue (default 100) and valueLabel.
Colour changes by percentage: success below thresholds.warning (default 70), warning from there, danger from thresholds.danger (default 90). Override with thresholds.
Provide label or aria-label.
variant is bar (default) or segmented, with segments (default 10).

Example source · show

import { Meter } from './meter'

export const styles = {
  Bar: () => (
    <div className="flex w-72 flex-col gap-4">
      <Meter label="Storage" value={42} />
      <Meter label="Bandwidth" value={78} />
      <Meter label="Seats" value={14} maxValue={15} valueLabel="14 of 15" />
    </div>
  ),
  Segmented: () => (
    <div className="flex w-72 flex-col gap-4">
      <Meter label="Battery" variant="segmented" value={30} thresholds={{ warning: 101, danger: 101 }} />
      <Meter label="CPU" variant="segmented" segments={20} value={95} />
    </div>
  ),
}

Source: packages/ui/src/meter/meter.tsx

Catalog

Category: feedback
Priority: Core
Primitive: react-aria
React Aria: Meter
Base UI: Meter