Meter

Displays a quantity within a known range, built on React Aria's Meter. Use it for a static measurement like disk usage or capacity; use ProgressBar for work that's underway.

import { Meter } from "@pockets-ui/components"

Basic

value is read against a 0–100 range by default and rendered as a percentage.

Storage used35%

Code

import { Meter } from "@pockets-ui/components"

export default function MeterBasic() {
  return <Meter label="Storage used" value={35} css={{ maxWidth: "64" }} />
}

Custom value scale

Set minValue and maxValue to measure on the domain's own scale — the label still reports a percentage of the range.

Tasks completed50%

Code

import { Meter } from "@pockets-ui/components"

export default function MeterCustomScale() {
  return (
    <Meter
      label="Tasks completed"
      value={30}
      minValue={0}
      maxValue={60}
      css={{ maxWidth: "64" }}
    />
  )
}

Custom value format

formatOptions takes any Intl.NumberFormat options, so the value can be shown in the unit users actually think in.

Disk space128 GB

Code

import { Meter } from "@pockets-ui/components"

export default function MeterCustomFormat() {
  return (
    <Meter
      label="Disk space"
      value={128}
      maxValue={512}
      formatOptions={{ style: "unit", unit: "gigabyte" }}
      css={{ maxWidth: "64" }}
    />
  )
}