# Token meter

How much of a model’s context a conversation has used, as a segmented meter with the limit printed at its end. The strip is the meter’s: dark glass, the unlit segments just visible. It is green while there is room, amber from a cut line near the limit and red once the count is over it. A line of words says the same in a sentence (“41k of 128k tokens”), and a small display carries the figures, so colour is never the only sign.

Kit part · With the Kit · https://tactileui.dev/parts/token-meter

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The meter’s strip and the ladder’s segments: dark glass with the unlit segments just visible, and the whole lit length in the state’s lamp colour. The count is the small display’s figures; the words are the status lamp’s. The segments move by a clip, not by a repaint.

## Variants

- Room · 41k of 128k
- Close to the limit · 112k of 128k
- Over the limit · 131k of 128k
- Nothing used yet
- A smaller context · 28k of 32k
- Narrow

## States

- Room
- Near
- Over

## Props and options

| Name | Kind | Description |
| - | - | - |
| tokenCount() · tokenMeterState() · tokenMeterFill() · tokenMeterWords() · tokenMeterNote() · tokenMeterSays() | function | A count in short words (“41k”), where it stands, the lit share, the sentence, the note beside it, and what is said on a change. |

## Usage notes

Press Add a message to grow the count. The meter lights more segments, the words change, and when the count passes the printed cut line it goes amber and says how much is left; past the limit it goes red and says how far over. The status line speaks only when the state changes, not on every message.

## Accessibility

- The state is never only a colour. A line of words under the strip says the count, and a note says “16k left” or “3k over the limit”; the lamp beside it is hidden from a screen reader. The cut line where “near” begins is printed on the strip, and the limit is printed at its end.
- A change of state is said once, politely: “Close to the limit: 112k of 128k tokens, 16k left.” A count that climbs inside one state says nothing, so a long chat does not chatter.
- The display above the strip repeats the figures for the eye and is hidden from a screen reader.
- The segments are drawn by the stylesheet, so a copy of the page has none to copy. On a phone the strip is taller; it scales with the width and the page never scrolls sideways.

## Related parts

- [Meter](https://tactileui.dev/parts/meter): A value inside a known range, read off an LED strip. The strip is a native meter element, so low, high and optimum are the browser’s own: the whole lit length takes the colour of where the value stands (green in the good region, amber next to it, red beyond), not the colour of the segment it has reached. The marks under the strip print where the regions begin, and cut lines across it show the same two places. Words say the state too.
- [Ladder](https://tactileui.dev/parts/ladder): An LED ladder for levels and load: green, then amber, then red, the way a recording level has always been read.
- [Composer](https://tactileui.dev/parts/composer): The prompt box. One deep recess holds the text and the keys sit on its floor: attach at one end; at the other a small LCD that counts tokens, amber near the limit and red over it, and the send key, which becomes a stop key while a reply runs. It is a real form with a labelled text area. Enter sends and Shift and Enter make a new line, and the send key is disabled while there is nothing to send. The text grows as you type, up to a height, then scrolls.
- [LCD](https://tactileui.dev/parts/lcd): A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.