Meter - Kumo

Storage used

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

Installation

import { Meter } from "@cloudflare/kumo";

import { Meter } from "@cloudflare/kumo/components/meter";

import { Meter } from "@cloudflare/kumo";

export default function Example() {
  return <Meter label="Storage used" value={65} />;
}

The default meter displays a label and percentage value.

Storage used

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

Use customValue to show a custom string instead of the percentage.

API requests750 / 1,000

<Meter label="API requests" value={75} customValue="750 / 1,000" />

Set showValue={false} to hide the value display.

Progress

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

A meter at 100% capacity.

Quota reached

<Meter label="Quota reached" value={100} />

A meter with a low value.

Memory usage

<Meter label="Memory usage" value={15} />

Prop	Type	Default	Description
customValue	`string`	-	Custom formatted value text (e.g. "750 / 1,000") displayed instead of percentage.
label*	`string`	-	Label text displayed above the meter track.
showValue	`boolean`	-	Whether to display the percentage value next to the label.
trackClassName	`string`	-	Additional CSS classes for the track (background bar).
indicatorClassName	`string`	-	Additional CSS classes for the indicator (filled bar).
value	`number`	-	Current value of the meter
max	`number`	-	Maximum value of the meter (default: 100)
min	`number`	-	Minimum value of the meter (default: 0)