Gauge

Arc gauge for single-metric readouts with meter accessibility.

Show capacity, completion, or score at a glance in dashboards and status panels. Adjust arc angles for semicircles or full rings; format the center readout for domain units.

  • SLA progress, storage utilization, or survey scores on dashboard cards.
  • Semicircular gauges in compact layouts (start_angle=-110, end_angle=110).
  • Accessible meter readouts with aria_value_text when units matter to screen readers.
  • Set value between value_min and value_max; None hides the value arc.
  • Pick start_angle / end_angle for semicircle vs full ring layouts.
  • Customize label with GaugeLabel for static text or a formatter callback.
  • Leave skip_animation unset to honor reduced-motion; arc tween runs on value changes otherwise.
  • Wrap the gauge in a native element with data-testid for E2E hooks.
Default gauge

Circular gauge at 75 on a 0–100 scale. Arc sweep animation runs on mount and value updates unless reduced motion or skip_animation is set.

75
Semicircle gauge

Compact semicircular arc for card layouts. Negative start_angle and positive end_angle open the gauge upward — common pattern for KPI tiles.

62
Accessible value text

role="meter" with aria-valuetext describing units for screen readers. Set when the visible center label omits context (e.g. shows "42" but means "42 minutes remaining").

42 min