Meter

The Meter component provides a semantic way to visualize scalar measurements within a known range using the native HTML meter element.

Ignix Lite meters support low, medium, and high states with accessible styling.

---

Preview

Code

<meter
  value="20"
  min="0"
  max="100"
  low="30"
  high="70"
  optimum="100"
></meter>

<meter
  value="50"
  min="0"
  max="100"
  low="30"
  high="70"
  optimum="100"
></meter>

<meter
  value="90"
  min="0"
  max="100"
  low="30"
  high="70"
  optimum="100"
></meter>

Usage

Preview

Storage Usage

68% used

Code

<strong>
  Storage Usage
</strong>

<meter
  value="68"
  min="0"
  max="100"
  low="30"
  high="70"
  optimum="100"
></meter>

<span>
  68% used
</span>

---

Attributes

Attribute	Type	Description
value	number	Current meter value
min	number	Minimum value
max	number	Maximum value
low	number	Lower threshold
high	number	Upper threshold
optimum	number	Ideal value