UsageMeter

UsageMeter is the building block for "X used out of Y" surfaces. Tone auto-shifts when the value crosses configurable thresholds.

#Default usage

<UsageMeter label="API calls" limit={10000} value={7500} />

#Import

import { UsageMeter, type UsageMeterTone } from "@froggdesign/enter-ui-react";

#Accessibility

Renders with role="meter" plus aria-valuemin/max/now. The label doubles as aria-label when it's a string.

#API

• value, limit: required numbers.
• tone: optional override ("neutral" | "success" | "warning" | "error").
• thresholds: ratios (0–1) for warning/error tone derivation.
• formatValue(value, limit): customise the right-hand display (default ${value} / ${limit}).
• description: muted line below the bar.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.