Cost / token chip
A unit of measurement. Compact enough to slot inline next to tool calls, plan steps, or audit rows.
Included in the single kansho full pack. Components are not offered as separate installs.
Variants
Usage
Guidance- Pass tokens, cost, or both — the chip renders whichever is present.
- Use variant="warning" only when a run is over its budget cap.
- Rely on the warning colour alone — pair it with the over-budget cost value.
- Use it for anything but token or spend figures.
- When to use
- A compact per-run or per-turn token / spend readout.
- When not to
- Full cost breakdowns — use the cost-attribution ledger instead.
Props
API reference| Prop | Type | Default | Description |
|---|---|---|---|
| tokens | number | — | Token count; formatted with thousands separators. |
| cost | number | — | Spend in USD; formatted as a dollar figure. |
| variant | 'muted' | 'accent' | 'warning' | 'muted' | Tint; warning signals over-budget. |
Supporting sources
These installed helpers belong to components documented on this page. They do not increase the public component count.
lib/format-number.tsShared compact-number formatter.
Component documentation
Cost Chip
components/agent/cost-chip.tsxPurpose
Shows token usage, USD cost, or both in a compact metadata chip.
Appropriate use
Use next to run or tool metadata where a terse cost summary is sufficient.
Example
components/agent/cost-chip.tsx has a representative live example in the "Variants" section on /components/cost-chip.
States
Variants are muted, accent, or warning; tokens and cost are independently optional.
API and props
CostChip accepts tokens, cost, variant, and className.
Dependencies
Direct imports are React, Lucide icons, compact-number formatting, and cn.
Accessibility
Values are visible text in normal reading order; icons are supplemental and the chip adds no status role.
Limitations
It formats display values only and does not calculate price, currency conversion, budgets, or thresholds.
Source
Source: components/agent/cost-chip.tsx.
Full pack
components/agent/cost-chip.tsx is documented at /components/cost-chip and installs only through the single Kansho full pack; no individual component install is offered.