All components (204)
Usage and cost
AI · UsageBadge
What it is and when to use it
What a response cost: the tokens in compact form and the cost in the currency of the language, on one small, muted line. "1.2K tok · $0.03".
When to use it
- In the footer of an assistant's message (
metaofChatMessage). - In a summary of a task or a conversation.
When not to
- For a cost panel with series and periods: that is a chart.
- For a big summary figure: that is a
Stat.
Keyboard: it is not interactive; it does not enter the tab order.
Accessibility: the visible text goes compact and hidden from the reader; what is heard is the whole sentence, "Usage: 1234 tokens, $0.03". A cost under one cent does not show as 0.00: it is written with four decimals.
Fine-tuning: it inherits the colour and size of the small text; it has no variables of its own.
What it looks like
<UsageBadge tokens={1234} cost={0.03} currency="USD" />
<UsageBadge tokens={482000} cachedTokens={391000} cost={1.84} currency="EUR" />
<UsageBadge cost={0.03} currency="USD" />Props
Import it with import { UsageBadge } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
cachedTokens | number | Of those tokens, how many came from the provider's cache. Shown as a percentage: "62% cached". |
className | string | Merged with the library classes; it does not replace them. |
cost | number | What it cost. |
currency | string | The currency of the cost, in ISO 4217. Defaults to dollars. |
tokens | number | Tokens spent. They are written compactly: "1.2K". |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: