Gauge
Displays a single metric value within a defined range using radial, arc, or linear visual styles.
When to Use
- Visualize capacity, utilisation, or performance metrics at a glance.
- Show a single KPI (CPU usage, battery level, score) within a min/max range.
- Use Radial for dashboards, Arc for compact metric cards, Linear for inline progress.
- Apply thresholds to automatically shift colour from green → amber → red as values rise.
25%
60%
90%
30%
65%
95%
40%
70%
90%
CPU
RAM
Disk
30%
30
65%
65%
65%
Switch variant to compare Radial, Arc, and Linear shapes.
Low
Med
High
API Reference
Gauge
| Property | Type | Default | Description |
|---|---|---|---|
| Value | double | 0 | Current value within the Min–Max range. |
| Min | double | 0 | Minimum value. |
| Max | double | 100 | Maximum value. |
| Variant | GaugeVariant | Radial | Visual shape. Values: Radial (270° arc), Arc (180° semicircle), Linear (horizontal bar). |
| Size | int | 120 | Diameter (Radial/Arc) or width (Linear) in pixels. |
| StrokeWidth | int | 8 | Thickness of the arc/bar in pixels. |
| Label | string? | null | Centre text. Defaults to the percentage when null. |
| ShowValue | bool | true | Show the value/percentage label. |
| Color | string | "primary" | Theme token for the value arc/bar (e.g. "primary", "success", "destructive"). |
| TrackColor | string | "muted" | Theme token for the background track. |
| Thresholds | IReadOnlyList<GaugeThreshold>? | null | Colour bands. Each entry has a Value (threshold) and Color (CSS color). The highest matching threshold wins. |
Related Components
- Progress — Linear and circular progress bars with indeterminate support.
- RingProgress — A clean determinate progress ring optimised for inline use.
- Statistic — Display a single numeric KPI with label and trend.