Meter

Import

import { Meter } from '@tac-ui/web';

Playground

Interactively configure the Meter props below.

<Meter value={50} label="Usage" />

Default

A basic meter showing a labeled value with a percentage display.

<Meter value={42} label="Storage used" />

Various Values

The meter bar color changes based on the fill level — green under 60%, yellow between 60–80%, and red above 80%.

<Meter value={25} label="Low usage" />
<Meter value={50} label="Moderate usage" />
<Meter value={75} label="High usage" />
<Meter value={95} label="Critical usage" />

Custom Value

Use customValue to display a formatted string instead of the default percentage.

<Meter value={72} label="Storage" customValue="7.2 GB / 10 GB" />
<Meter value={3} min={0} max={5} label="Rating" customValue="3 / 5 stars" />

Hidden Value

Set showValue to false to hide the value text and display only the label and bar.

<Meter value={60} label="Progress" showValue={false} />

Meter vs Progress

Use Meter to represent a static scalar value within a known range (e.g., storage, scores). Use Progress to indicate the completion status of an ongoing operation (e.g., file upload, loading).

API Reference