ContextMeter
How much of a model’s context window a conversation has used — "12K / 200K" with a bar that warns as it fills
Category: feedback · WCAG 2.2-AA · ai, context, tokens, usage, meter, quota
States
- normal
- high
- full
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Tokens used so far. |
max | number | — | The context window size, in tokens. |
label | string | Context | The meter’s name, shown above the bar. |
labels | { usage?: string } | — | Overrides for the component’s user-visible strings (i18n). `usage` is the spoken value and may contain `{used}`, `{max}` and `{percent}`. |
Design tokens
--cascivo-color-ai--cascivo-color-warning--cascivo-color-destructive--cascivo-color-bg-subtle--cascivo-color-text--cascivo-color-text-muted--cascivo-radius-full
When to use
- Showing how much of the model’s context window a conversation or document has used
- Warning before a conversation hits the limit and older turns are dropped
When not to use
- Task progress toward completion — use ProgressBar
- Account-level usage and billing quotas with many figures — use Stat or a chart
How to build an accessible ContextMeter in React →
Examples
Plenty left
<ContextMeter value={12400} max={200000} />Nearly full
<ContextMeter value={192000} max={200000} />Related components
- ProgressBar — ProgressBar is for progress toward done; a meter measures a level within a range
- AiStatus — Both sit in an AI chat’s header or footer