Usage Card

The rail-footer upgrade block: an icon chip, a title with a badge, one line of copy, a meter and a single full-width action, all inside one compact card.

tsx

1import {
2  UsageCard,
3  UsageCardIcon,
4  UsageCardTitle,
5  UsageCardBadge,
6  UsageCardDescription,
7  UsageCardMeter,
8  UsageCardAction,
9} from "@pestoui/core"

Plan usage

tone on the card reaches the chip and the badge together. The meter slot takes any meter — a Progress here.

Agent runs82%

4,100 of 5,000 included runs used.

Warning tone, no chip

Leave the icon out and the header collapses to one track. Every part is optional.

Storage94%

470 of 500 GB used.

Props

Prop	Type	Default	Description
tone	"muted" \| "selected" \| "success" \| "warning" \| "destructive" \| "info" \| "chart-1" … "chart-5"	"muted"	On UsageCard. Inherited by the icon chip and the badge.
UsageCardIcon tone	same set	—	On UsageCardIcon. Overrides the card's tone for the chip alone.
children	ReactNode	—	On UsageCardMeter. Any meter — Progress, Usage Meter, Segmented Bar.
className	string	—	On any part. Set the card's width on UsageCard.

PreviousTrend Pill Next Usage Meter

Pesto UI · 117 documented components