Data displayReact Native

Gauge

Show a normalized circular native metric with a formatted accessible value.

Public APILumenGaugeReact Native

Native example

Use Gauge

Use for a current bounded metric, not task completion. Use Progress when the value represents work moving toward completion.

View verified React Native runtime capture

<LumenGauge
  label="Thermal pressure"
  value={48}
  valueLabel="Fair"
  tone="warning"
/>

Reference

The primary shared and platform-specific options exposed by LumenGauge.

API	Values or type	Default	Description
label	`string`	`Required`	Names the bounded metric.
value	`number`	`Required`	Provides the current value.
max	`number`	`100`	Provides the positive maximum.
valueLabel	`string`	`Required`	Provides the visible and accessible formatted value.
tone	`neutral · brand · accent · success · warning · danger`	`brand`	Selects semantic emphasis.

Native behavior

Use for a current bounded metric, not task completion. Use Progress when the value represents work moving toward completion.

The visual ring is replaced by one accessible label and formatted value. Invalid values are normalized into the valid range.

Shared component