Meter

Meter visualises a known value inside a fixed range — disk usage, plan quota, score thresholds — with a labelled track and optional tone. Use it instead of Progress when the value isn't a task in flight.

#Default usage

<Meter label="Storage used" value={72} description="72% of 100GB" />

#Import

import { Meter } from "@froggdesign/enter-ui-react";

#Tone

#Accessibility

Meter renders the track as role="meter" with aria-valuemin, aria-valuemax, and aria-valuenow. Provide an accessible name through label or aria-label.

#API

• value: required number.
• min / max: range bounds (defaults 0–100).
• tone: neutral (default), success, warning, error.
• label / description: rendered above and below the track.
• hideValue: hides the inline percentage.
• formatValue: customise the rendered value text.

#Styling

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