Meter

Stripe MeterChart

A whole divided into segments. As usage it is grey, turning orange at 70% and red at 90% of the limit, and reads “6,500 of 10,000 · 65%”. As composition it uses the brand scale, light to deep, to show where an amount sits. compact draws the bar alone for a table cell.

pnpm add @zikzuk/ui

import { Meter } from "@zikzuk/ui";

Usage

65%, 75% and 93% of the limit.

SMS this month6,500 of 10,000 · 65%

Andheri branch37,500 of 50,000 · 75%

Spent31,000
Held6,500

API calls today930 of 1,000 · 93%

Composition and compact

Where the money is₹5,00,000.00

Unallocated₹1,20,000.00
In branch pools₹2,30,000.00
In wallets₹1,50,000.00

When to use

A plan's quota, a branch's spend against its limit, an allocation.

Not for

Progress through steps — TaskList has its own progress header.
Trends over time — Sparkline or a chart.

Props

Prop	Type	Description
segments	{ label, value, color? }[]	The parts. data is Stripe's name for it.
total	number	The limit (usage) or the whole (composition).
variant	"usage" \| "composition" Default `"usage"`	How it is coloured and labelled.
label	ReactNode	Left of the value line; a string label also names a compact meter.
valueLabel	ReactNode	Right of the label; null hides it.
formatValue	(n: number) => string	Formats every number shown.
showLegend	boolean Default `true`	The legend under the bar.
onSegmentClick	(segment) => void	Legend items become buttons.
compact	boolean Default `false`	The bar alone.
aria-label	string	Accessible name without a visible label.
className	string	Extra classes on the outer element.