Components

Meter

A measure against a limit, like spend against a budget: warm near it, red past it.

Groceries₹6,200 / ₹10,000

₹3,800 left

Dining out₹2,700 / ₹3,000

₹300 left

Transport₹4,100 / ₹3,500

₹600 over

Import

import { Meter } from '@rinzai/zen';

Examples

Milestones

A savings goal with milestones at each quarter: the ones passed are notched into the fill.

Emergency fund$4,200 / $10,000

1 of 4 milestones

API reference

<Meter>

A measure against a limit, e.g. spend against a budget: a bar with a label, a figure and a note. Over the limit it turns red; near it, warm. Announced as a meter, with valueText read out instead of the bare number.

Prop	Type	Default
`value`Required	`number`	`—`
`className`	`string`	`—`
`detail` Top right, e.g. "₹8,200 / ₹10,000".	`ReactNode`	`—`
`hint` Below the bar, e.g. "₹1,800 left".	`ReactNode`	`—`
`label`	`ReactNode`	`—`
`marks` Milestones along the bar, in the same units as value: e.g. [2500, 5000, 7500] of 10000.	`number[]`	`—`
`max` The limit (default 100). Values past it fill the bar and turn it red.	`number`	`100`
`tone` `auto` picks warning past `warnAt` of max and negative past max.	`"auto" \| "default" \| "negative" \| "warning"`	`auto`
`valueText` What screen readers say for the value, e.g. "₹8,200 of ₹10,000, ₹1,800 left".	`string`	`—`
`warnAt` Fraction of max where `auto` turns to warning (default 0.85).	`number`	`0.85`