UsageMeter

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

SourcePackage @kerf-js/veneer

Preview

tsx

import { Stack, UsageMeter } from '@kerf-js/veneer'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 @kerf-js/veneer

Usage

tsx

import { UsageMeter } from '@kerf-js/veneer'

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