# Gauge

Source: https://lumeo.nativ.sh/components/gauge

# 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.

Preview Code

Radial (default)

25%

60%

90%

Copy Code

Preview Code

Arc (semicircle)

30%

65%

95%

Copy Code

Preview Code

Linear

40%

70%

90%

Copy Code

Preview Code

Custom Label

CPU

RAM

Disk

Copy Code

Preview Code

Thresholds

30%

\-10 30 +10

Copy Code

Preview Code

Sizes

65%

65%

65%

Copy Code

Preview Code

Variant (interactive)

Switch variant to compare Radial, Arc, and Linear shapes.

Radial Arc Linear

Low

Med

High

Copy Code

## 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](/components/progress) — Linear and circular progress bars with indeterminate support.
-   [RingProgress](/components/ring-progress) — A clean determinate progress ring optimised for inline use.
-   [Statistic](/components/statistic) — Display a single numeric KPI with label and trend.