Meter

A bar showing a quantity inside a known range, such as credit left out of a limit. Prop-driven; a value outside [min, max] fills the bar to its nearest end.

import { Meter } from "@evolve-storefront/ui/meter";

Design notes

A meter, not a progress bar: nothing is loading or finishing, so it is announced as a measurement. The host renders the caption; this is the bar alone.

Preview

DefaultOpen in Storybook ↗

Usage

Credit left out of a limit, announced as the amounts rather than a percentage. Past the limit, the bar stops at empty instead of drawing outside its track.

// The caption is yours; `label` and `valueText` are what a screen reader hears.
<Meter
  value={available}
  max={limit}
  label={t("credit-label")}
  valueText={t("credit-value", { available, limit })}
/>;

Props

Prop	Type	Description
value	number
label	string	Accessible name of the meter; required, since the bar has no visible text.
min?	number
max?	number
valueText?	string	What a screen reader announces instead of the bare number, e.g. "€ 932 of € 1,500".

Any other props go to the root element, like on a plain HTML element.