# Confidence Score Badge

Confidence Score Badge [#confidence-score-badge]

The **Confidence Score Badge** is the shared scored-output atom across LocalMode Elements. It maps a 0–1 score to a semantic color tier — by default high ≥ 0.8 (success), medium ≥ 0.5 (warning), and low (muted) — and renders the formatted percentage as either a flat pill badge or a radial dial. The tier breakpoints are props, so apps with cosine vs dot-product score distributions can tune them.

**When to use it:** anywhere you surface a scalar confidence or similarity score — `useClassify`, `useClassifyZeroShot`, `useSemanticSearch`, `useAnswerQuestion`. It is also consumed cross-family (e.g. by `ScoredResultBarList`, `TopResultCard`, and media-vision's `ImageResultGallery`).

Preview [#preview]

```tsx
'use client';

import { ConfidenceScoreBadge } from '@/components/confidence-score-badge';

/**
 * Demo for the ConfidenceScoreBadge component, used by the docs live preview.
 * Shows the flat + radial variants across all three tiers, plus a custom
 * threshold. Fully local — no model download.
 */
export default function ConfidenceScoreBadgeDemo() {
  return (
    <div className="flex flex-col items-center gap-6">
      <div className="flex flex-wrap items-center justify-center gap-3">
        <ConfidenceScoreBadge score={0.94} label="positive" />
        <ConfidenceScoreBadge score={0.63} label="neutral" />
        <ConfidenceScoreBadge score={0.28} label="negative" />
      </div>
      <div className="flex flex-wrap items-center justify-center gap-5">
        <ConfidenceScoreBadge score={0.94} variant="radial" />
        <ConfidenceScoreBadge score={0.63} variant="radial" />
        <ConfidenceScoreBadge score={0.28} variant="radial" />
      </div>
      <div className="flex flex-wrap items-center gap-3">
        {/* Tuned for a tighter cosine distribution. */}
        <ConfidenceScoreBadge
          score={0.72}
          thresholds={{ high: 0.65, medium: 0.4 }}
          label="custom thresholds"
        />
      </div>
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/results/confidence-score-badge
```

Dependencies [#dependencies]

* **Data source:** renders a single `score` (0–1) and optional `label` you pass — works with any backend. Recommended producers: `useClassify` / `useSemanticSearch` / `useAnswerQuestion` from `@localmode/react` (optional). See [Bring your own data](/docs/bring-your-own-data#results--insights).

* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Files installed [#files-installed]

* `confidence-score-badge.tsx` — the component
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**ConfidenceScoreBadge**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `score` | `number` | — | **Required.** Confidence/similarity score in the inclusive range 0–1. |
| `variant` | `"radial" \| "flat"` | `"flat"` | Render style. `flat` is a pill badge; `radial` is a circular dial that fills proportionally to the score. |
| `thresholds` | `object` | `{ high: 0.8, medium: 0.5 }` | Tier breakpoints. Tune these for distributions that differ from the default (e.g. dot-product vs cosine similarity). |
| `label` | `string` | — | Optional label rendered before the percentage in the flat variant (e.g. the predicted class name). |
| `size` | `number` | `56` | Diameter of the radial dial in pixels. Ignored by the flat variant. |
| `precision` | `number` | `0` | Number of fraction digits in the rendered percentage. |

Examples [#examples]

Flat badge with a label [#flat-badge-with-a-label]

```tsx
import { ConfidenceScoreBadge } from '@/components/confidence-score-badge';

export function Example() {
  return <ConfidenceScoreBadge score={0.92} label="positive" />;
}
```

Radial dial [#radial-dial]

```tsx
<ConfidenceScoreBadge score={0.63} variant="radial" size={64} />
```

Custom thresholds (tighter cosine distribution) [#custom-thresholds-tighter-cosine-distribution]

```tsx
<ConfidenceScoreBadge score={0.72} thresholds={{ high: 0.65, medium: 0.4 }} />
```

Customization [#customization]

The component is styled with shadcn/ui CSS-variable tokens (`bg-card`, `text-card-foreground`). The radial dial's fill uses a `conic-gradient` driven by CSS variables so it themes via the consumer's tokens. The per-tier colors map to Tailwind's `emerald` / `amber` palettes with a muted fallback — swap them in the copied `TIER_STYLES` map to match your design system. The exported `resolveTier()` helper lets you reuse the exact tiering logic for your own styling.