Pesto UI

Quota Tile

One plan quota — seats, storage, run credits — as a titled tile: a status badge, the count against its allowance, and a usage bar. The state is derived from the numbers, so a quota past its threshold flags itself in words as well as colour.

tsx
import { QuotaTile } from "@pestoui/core"

Healthy and near limit

At criticalAt of the allowance (0.8 by default) the badge turns destructive and the bar follows. The tile is a section labelled by its own heading.

Seats filled

Healthy
11 / 20
55% used

Knowledge storage

Healthy
238 / 500 GB
48% used

Agent runs

Near limit
46,300 / 50,000
93% used

Threshold, wording & heading level

criticalAt moves the threshold, the two labels rename the states, and headingLevel fits the title into the page outline it sits in.

Knowledge storage

Over 40%
238 / 500 GB
48% used

Props

PropTypeDefaultDescription
iconElementType—An icon component, drawn muted before the title.
labelReactNode—The quota's name — the tile's heading.
usednumber—The amount spent.
limitnumber—The allowance.
unitstring—Trails the figure after a space — "GB".
srLabelstring—Names the usage bar for assistive tech.
criticalAtnumber0.8The share of the allowance, 0..1, at which the quota reads critical. Emitted as data-state on the root.
criticalLabelReactNode"Near limit"The badge text when critical.
healthyLabelReactNode"Healthy"The badge text otherwise.
formatValue(n: number) => stringn.toLocaleString("en-US")Formats used and limit. Keep it locale-fixed so server and client render the same string.
headingLevel2 | 3 | 43The level the title renders at.
classNamestring—On the root section. Every other section prop — data-* included — is spread there too.
PreviousPromo CardNext Radio Group

Pesto UI · 117 documented components