Usage Meter

v1.0.0·Added in 1.0.0

How much of a plan is used: tokens, messages, images, credits or money against their limits, with resets, warnings and an upgrade offer.

Read it at a glance: each meter shows what is used against its limit, the percent and a bar; the bars grow from empty one after another the first time the card scrolls into view, then glide when the numbers change. At 75% a bar turns amber with an Almost at your limit note, at 90% red, and at the limit it stays full in red and says how far over it went; a word and an icon always say it too, and a screen reader hears each crossing once through a polite status (never on load). Resets read today at 18:00, tomorrow or in 3 days up close and a date further out, with the full date on hover. The upgrade offer slides open once a meter reaches the warning line; its button is a real link when it has an href. The compact variant is a small ring with the percent of the fullest meter for a composer or a topbar: click or tap it, or press Enter or Space on it, and the details open in a popover whose panel takes focus first (Tab goes on to the upgrade button); Escape or a click outside closes it and focus returns to the ring. On a phone the details rise as a bottom sheet with 14px rows and a full width upgrade button pinned at the bottom. Every button has a 44px touch target. In a narrow spot (under 352px) a row puts its value on a line of its own under the label (wider, a value that does not fit wraps instead of breaking the label), and a narrow offer puts its button under the text, so nothing gets squeezed. Press Use 50,000 tokens in the playground to push the token meter over both thresholds. Reduced motion shows the values at once.