Gauge

Gauge renders a value-in-range as a half-circle arc. Use it for product scores, system health, and capacity readings where a linear Meter would feel less prominent.

#Default usage

<Gauge label="Health score" unit="%" value={68} />

#Import

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

#Tone

#Accessibility

Gauge exposes role="meter" with aria-valuemin, aria-valuemax, and aria-valuenow. Provide aria-label or a textual label so the value has a name.

#API

• value: required number.
• min / max: bounds (defaults 0–100).
• tone: neutral (default), success, warning, error.
• size: width in pixels (default 120).
• unit: optional ReactNode rendered next to the value (for example "%").
• hideValue: hides the central value readout.
• formatValue(value, max): customise the rendered value.

#Styling

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