Meter
Visual representation of a quantity within a known range, featuring threshold-driven status coloring and segmented capacity views.
Meter
A Meter represents a static numerical quantity within a defined minimum and maximum range. Unlike <ProgressBar>, which communicates progress toward task completion over time, a Meter displays a current scalar measurement such as disk capacity, RAM utilization, battery charge, performance score, or financial quotas.
Hashti’s Meter extends React Aria Components’ Meter with automatic semantic threshold calculation (low, high, optimum), segmented multi-part tracks, and both horizontal linear bar and circular radial geometries.
Import
import { Meter } from "@hashti/react";
// Or named subcomponents:
// Meter.Root, Meter.Label, Meter.Value, Meter.Track, Meter.Fill, Meter.HelperText, Meter.Circle
Anatomy
<Meter value={72} minValue={0} maxValue={100} label="Storage">
<div className="flex justify-between">
<Meter.Label>SSD Storage</Meter.Label>
<Meter.Value />
</div>
<Meter.Track>
<Meter.Fill />
</Meter.Track>
<Meter.HelperText>72 GB of 100 GB consumed</Meter.HelperText>
</Meter>
Examples
Basic Meter
By default, <Meter> renders a clear linear track with automated label and value presentation:
import { Meter } from "@hashti/react";
export function BasicMeterExample() {
return (
<div className="max-w-md space-y-4">
<Meter
label="Disk Space"
value={68}
minValue={0}
maxValue={100}
helperText="System volume (Macintosh HD)"
/>
</div>
);
}
Thresholds & Semantic Tones
The Meter automatically evaluates whether the current value is optimal or concerning based on HTML5 meter standard attributes:
low: Low boundary threshold.high: High boundary threshold.optimum: Ideal value point.
Depending on whether lower values are better (e.g. CPU temperature, error rate) or higher values are better (e.g. battery level, test score), Hashti automatically applies semantic colors:
success:--success(Turquoise/Emerald)warning:--warning(Isfahan Amber)error:--error(Terracotta Red)
import { Meter } from "@hashti/react";
export function StorageTonesExample() {
return (
<div className="max-w-md space-y-6">
{/* Lower is better: CPU usage */}
<Meter
label="CPU Usage"
value={24}
low={50}
high={80}
optimum={10}
helperText="Normal workload (Low is better)"
/>
{/* Warning range */}
<Meter
label="RAM Utilization"
value={74}
low={50}
high={80}
optimum={20}
helperText="High memory pressure"
/>
{/* Critical range */}
<Meter
label="Cluster Disk Space"
value={92}
low={60}
high={85}
optimum={20}
helperText="Critical: Free space below 10%"
/>
</div>
);
}
Segmented Track (Storage Breakdown)
For storage analyzers, budget allocators, and memory breakdowns, supply a segments array to partition the track across multiple colors:
import { Meter } from "@hashti/react";
export function SegmentedStorageMeter() {
return (
<div className="max-w-md">
<Meter
label="Cloud Storage Breakdown"
value={180}
maxValue={200}
segments={[
{ value: 90, color: "var(--accent-turquoise)", label: "Raw Video" },
{ value: 45, color: "var(--accent-amber)", label: "Documents" },
{ value: 30, color: "var(--focus)", label: "Backups" },
]}
helperText="165 GB of 200 GB utilized"
/>
</div>
);
}
Circular Radial Meter
Set variant="circular" to render a compact, circular radial gauge ideal for server dashboards, stat cards, and battery widgets:
import { Meter } from "@hashti/react";
export function CircularMeterExample() {
return (
<div className="flex gap-6 items-center">
<Meter
variant="circular"
size="md"
value={84}
label="Battery"
low={20}
high={60}
optimum={90}
/>
<Meter
variant="circular"
size="lg"
value={15}
label="Battery"
low={20}
high={60}
optimum={90}
/>
</div>
);
}
Props Reference
Meter (Meter.Root)
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current measured numerical value. |
minValue | number | 0 | Lower bound of the range. |
maxValue | number | 100 | Upper bound of the range. |
low | number | — | Threshold boundary below which value is considered low. |
high | number | — | Threshold boundary above which value is considered high. |
optimum | number | — | Ideal target value point used for tone evaluation. |
tone | 'auto' | 'neutral' | 'success' | 'warning' | 'error' | 'auto' | Force a specific semantic color or calculate automatically. |
variant | 'bar' | 'circular' | 'bar' | Linear progress bar or circular radial dial gauge. |
size | 'sm' | 'md' | 'lg' | 'md' | Track height or radial circumference. |
label | ReactNode | — | Accessible label announced to screen readers. |
formatOptions | Intl.NumberFormatOptions | — | Native number formatting options (e.g. { style: 'percent' } or { style: 'unit', unit: 'gigabyte' }). |
segments | MeterSegment[] | — | Multi-color partition segments array { value, color, label }. |
Accessibility
- Role: Emits native WAI-ARIA
role="meter". - Value Semantics: Automatically synchronizes
aria-valuenow,aria-valuemin, andaria-valuemax. - Accessible Text: Exposes formatted string via
aria-valuetextwhenformatOptionsorvalueTextis configured. - Screen Reader Announcements: VoiceOver, NVDA, and JAWS accurately communicate the scalar measurement without confusing users with task completion states.
Hashti Token Bindings
| Token | CSS Variable | Applied State |
|---|---|---|
| Background Track | --surface-raised / --divider | Inactive meter trough |
| Success Tone | --success (#246343) | Healthy range indicator |
| Warning Tone | --warning (#D97706) | Caution boundary indicator |
| Error Tone | --error (#DC2626) | Critical boundary indicator |
| Neutral Tone | --action | Unspecified threshold fill |
| Label Text | --text | Primary headline typography |
| Subtitle Text | --text-muted | Descriptive helper text |
WAI-ARIA & Data Attributes
| Attribute | Target | Description |
|---|---|---|
[data-optimum] | Meter | Set when value is within optimal range. |
[data-sub-optimum] | Meter | Set when value enters warning range. |
[data-critical] | Meter | Set when value enters critical threshold. |