AI primitive
TokenMeter
Compact progress bar showing tokens used / max with color thresholds. Slots into ChatComposer or stands alone next to a model picker.
Usage
Pick your edition with the tabs. Selection syncs across all docs.
tsx
import { TokenMeter } from '@/components/molecules'
<TokenMeter used={2480} max={8000} />Props
Same surface in both editions; HTML version exposes equivalents through Alpine x-data.
| Prop | Type | Default | Description |
|---|---|---|---|
| used | number | 0 | Tokens currently consumed. |
| max | number | — | Maximum context size. |
| warningThreshold | number | 0.75 | Switch to warning color past this fraction. |
| dangerThreshold | number | 0.95 | Switch to danger color past this fraction. |
Accessibility
role
Renders as a <progress> element with aria-label.
contrast
Used/max numbers tabular-nums in WCAG AA pairs.