Meter

A graphical display of a numeric value within a known range.

Anatomy

Import and assemble the component:

1import { Meter } from '@raystack/apsara'
2

3{/* Direct usage — renders track automatically */}
4<Meter value={40} />
5

6{/* Composable usage */}
7<Meter value={40}>
8  <Meter.Label>Storage used</Meter.Label>
9  <Meter.Value />
10  <Meter.Track />
11</Meter>

API Reference

Root

The main container for the meter. Renders a default track when no children are provided.

Prop

Type

Label

Displays a label for the meter.

Prop

Type

Value

Displays the formatted current value as a percentage.

Prop

Type

Track

Contains the indicator that visualizes the current value.

Prop

Type

Examples

Variant

The meter supports linear and circular variants.

1<Flex direction="column" gap="large" style={{ width: "300px" }}>
2  <Meter value={15}>
3    <Flex justify="between">
4      <Meter.Label>Storage used</Meter.Label>
5      <Meter.Value />
6    </Flex>
7    <Meter.Track />
8  </Meter>
9</Flex>

Direct Usage

The simplest way to use the meter. When no children are provided, it renders the track automatically.

1<Flex direction="column" gap="large" style={{ width: "300px" }}>
2  <Meter value={40} />
3  <Meter value={70} />
4  <Meter value={100} />
5</Flex>

Customization

Customize the track for both variants. For linear, use height on the track. For circular, use width/height on the track to control the overall size and --rs-meter-track-size to control the stroke thickness.

1<Flex direction="column" gap="large" style={{ width: "300px" }}>
2  <Meter value={60}>
3    <Meter.Track style={{ height: 2 }} />
4  </Meter>
5  <Meter value={60}>
6    <Meter.Track />
7  </Meter>
8  <Meter value={60}>
9    <Meter.Track style={{ height: 8 }} />
10  </Meter>
11</Flex>

With Labels

Compose with Meter.Label and Meter.Value for additional context.

1<Flex direction="column" gap="large" style={{ width: "300px" }}>
2  <Meter value={60}>
3    <Flex justify="between">
4      <Meter.Label>CPU Usage</Meter.Label>
5      <Meter.Value />
6    </Flex>
7    <Meter.Track />
8  </Meter>
9  <Meter value={85}>
10    <Flex justify="between">
11      <Meter.Label>Memory</Meter.Label>
12      <Meter.Value />
13    </Flex>
14    <Meter.Track />
15  </Meter>

Custom Range

Use min and max to define custom value ranges.

1<Flex direction="column" gap="large" style={{ width: "300px" }}>
2  <Meter value={750} min={0} max={1000}>
3    <Flex justify="between">
4      <Meter.Label>API Calls</Meter.Label>
5      <Meter.Value />
6    </Flex>
7    <Meter.Track />
8  </Meter>
9</Flex>

Accessibility

  • Uses the meter ARIA role
  • Sets aria-valuenow, aria-valuemin, and aria-valuemax attributes
  • Supports aria-label and aria-valuetext for screen readers