UsageMeter

How much of a limit is used, with a warning at 80% and stripes past the limit.

SourcePackage @weft-js/warp

Preview

tsx

import { Stack, UsageMeter } from '@weft-js/warp'export function Levels() {  return (    <Stack gap="group">      <UsageMeter label="Build minutes" value={1240} limit={3000} format={n => n.toLocaleString('en-US')} />      <UsageMeter label="Build minutes" value={2610} limit={3000} format={n => n.toLocaleString('en-US')} note="You're close to this month's limit." />      <UsageMeter label="Build minutes" value={3000} limit={3000} format={n => n.toLocaleString('en-US')} note="Builds queue until the 1st." />      <UsageMeter label="Build minutes" value={3420} limit={3000} format={n => n.toLocaleString('en-US')} overage="+ $12.40 overage" />    </Stack>  )}

Installation

npm install @weft-js/warp

Usage

tsx

import { UsageMeter } from '@weft-js/warp'<Stack gap="group">  <UsageMeter label="Build minutes" value={1240} limit={3000} format={n => n.toLocaleString('en-US')} />  <UsageMeter label="Build minutes" value={2610} limit={3000} format={n => n.toLocaleString('en-US')} note="You're close to this month's limit." />  <UsageMeter label="Build minutes" value={3000} limit={3000} format={n => n.toLocaleString('en-US')} note="Builds queue until the 1st." />  <UsageMeter label="Build minutes" value={3420} limit={3000} format={n => n.toLocaleString('en-US')} overage="+ $12.40 overage" /></Stack>

Accessibility

The rail is a meter, and format shapes the words it speaks.

API Reference

Prop	Type	Default	Description
`label`	`string`	—	What is being measured.
`value`	`number`	—	The amount used.
`limit`	`number`	—	The plan's limit.
`format`	`((n: number) => string)`	`String`	Turns a number into words: `n => n + " GB"`.
`overage`	`string`	—	What past the limit costs.
`note`	`string`	—	Shown as it gets close to the limit.
`action`	`unknown`	—	A link to a bigger plan.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="meter"] [data-part="head"]

headrailrail-filloverticknote