---
title: Context Indicator
description: A compact ring showing how much context a conversation uses.
category: AiContext
status: beta
since: 0.3.9
tags: [ai, context, token]
syncStatus: reviewed
verified: true
---

## Usage

### Basic
Above 80% the level becomes `warning`, above 95% `danger`; `data-level` exposes it for style overrides.
::::TuffDemoWrapper{demo="ContextIndicatorContextIndicatorDemo" code-lang="vue"}
---
code: |
  <template>
    <TxContextIndicator :used-tokens="12300" :max-tokens="200000" />
    <TxContextIndicator :used-tokens="172000" :max-tokens="200000" />
    <TxContextIndicator :used-tokens="196000" :max-tokens="200000" />
  </template>
---
::::

### Best Practices

- Pass the model's real window size as `maxTokens`, not a hardcoded constant.
- Localize numbers with `formatter` rather than wrapping the component in your own text, or the `title` disagrees.
- Prompt the user only from `warning` upward; below that it is background information.
- Inside a clickable region, give the region its own accessible name: `role="meter"` conveys nothing actionable.

## API Reference

### Props

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `usedTokens` | `number` | — | Tokens used so far. Required. |
| `maxTokens` | `number` | — | Context window size. Required; 0 or less yields a ratio of 0. |
| `label` | `string` | `'Context usage'` | Accessible name, written to `aria-label`. |
| `formatter` | `(used: number, max: number) => string` | — | Text beside the ring; defaults to compact counts (`12.3K`, `1.2M`). |

### Slots

| Name | Scope | Description |
|------|-------|-------------|
| `detail` | `{ ratio: number, used: number, max: number }` | Appended after the text, for a percentage, a remaining count, or a "clear context" action. |

## Overview

- The ratio is `usedTokens / maxTokens`, clamped to 0–1, so an over-count never draws past a full ring.
- `title` is always "text (percentage)", so the percentage shows on hover even with a custom `formatter`.
- The root is `role="meter"` with `aria-valuemin` / `aria-valuemax` / `aria-valuenow` kept in sync; the SVG is `aria-hidden`.