TokenConfidence

TokenConfidence answers "which parts of this generated text should I double-check?". The text itself is the chart: confidence becomes a typographic underline beneath each token, in three discrete tiers — confident tokens get no mark at all, so reading stays primary and only the uncertain words draw the eye.

Install

import { TokenConfidence } from "@microcharts/react/token-confidence";// tokens — real values under “Sample data” below<TokenConfidence data={tokens} title="Model answer" />

const tokens = [  { token: "The", confidence: 0.98 },  { token: " Treaty", confidence: 0.93 },  { token: " of", confidence: 0.99 },  { token: " Westphalia", confidence: 0.71 },  { token: " was", confidence: 0.96 },  { token: " signed", confidence: 0.9 },  { token: " in", confidence: 0.97 },  { token: " 1648", confidence: 0.44 },];

Try it

When to use it

• Good for — LLM answers in chat or transcripts, flagging text to review.
• Avoid for — numeric confidence auditing (use CalibrationStrip) or a single score (Delta).

Sizing

The text is the chart, so it inherits the surrounding font size — there is no width/height. Set style={{ fontSize }} or let it flow inline with your prose.

Variants

Edge cases

Every token clears the hi threshold, so nothing is flagged — the sentence renders as plain, unmarked text. That absence of marks is the finding: nothing here needs a second look.

An empty data array renders nothing and reports "No tokens." to assistive tech.

Four homes

Why this default

The tiers are discrete — confident, unsure, guessing — never a continuous gradient, because people calibrate categorically: a smooth colour ramp reads as noise, but "double-check this word" reads instantly. Confident tokens carry no mark at all, and the two flagged tiers differ in stroke style as well as colour — unsure is a solid underline, guessing a dotted one — so the tier never depends on colour alone. For auditing exact probabilities, reach for CalibrationStrip instead.

Accessibility

The accessible name is the tier tally — "4 tokens: 1 confident, 1 unsure, 2 guessing." The interactive entry gives each flagged token a roving tab stop; ←/→ move between them (skipping confident tokens), announcing each one's tier and confidence.

Props

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.