Gauge

A semicircle meter for a single value. Server load below is honest sample data, rendered as a static SVG.

Server load

<Gauge label="Server load" value={75} />

Custom range

Pass min, max, and size to rescale the dial.

<Gauge label="Storage" value={30} min={10} max={50} size={240} />

Props

Prop	Type	Default	Description
`value`	`number`	-	Needle value; clamped into `[min, max]`.
`min`	`number`	`0`	Range floor.
`max`	`number`	`100`	Range ceiling.
`label`	`string`	`"Gauge"`	Accessible name on the meter.
`size`	`number`	`200`	viewBox edge; the SVG scales to `100%`.
`class`	`string`	-	Style passthrough.

Static honesty

Static SVG, no needle animation. The fill arc follows the gauge angle over a fixed semicircle track. Out-of-range values clamp both the arc and the displayed number; 0-to-100 ranges print a percent sign.

Accessibility

The wrapper is a meter (role="meter"), not an image: aria-valuemin, aria-valuemax, aria-valuenow, and aria-label carry the value. No role="img".
The inner SVG is aria-hidden; the center text repeats the value in print.