Meter

<Meter label="Storage" value={68} showValue />

Meter reports a value inside a known range. There is deliberately no Progress component: a task with a percentage is still just a measurement, and one bar that always means the same thing beats two that look identical and are chosen by accident.

Usage

import { Meter } from "@heyo-sh/heyo-ui";<Meter label="Storage" value={68} showValue />;

Tones

The tone is yours to pick, because only your application knows when 80% is fine and when it is an incident.

<Meter label="Requests" value={32} tone="neutral" showValue /><Meter label="Bandwidth" value={58} tone="brand" showValue /><Meter label="Build minutes" value={74} tone="warning" showValue /><Meter label="Quota" value={96} tone="danger" showValue />

Sizes and ranges

min and max set the range — a meter is not required to be a percentage. format controls how showValue prints it.

<Meter size="sm" value={40} /><Meter size="base" label="Memory" value={384} min={0} max={512} showValue /><Meter size="lg" value={88} tone="success" />

Inside a stat

A meter is small enough to be a stat's chart, which is the usual way a quota appears on a dashboard.

<Statborderedlabel="Storage"value="6.8"unit="GB of 10 GB"chart={<Meter value={68} size="sm" tone="brand" />}/>

Properties