ConfidenceBadge

DisplayReact · Next.js

A compact badge for an answer's confidence/groundedness score (high / medium / low with a percentage). Pair it with a self-grading step in your pipeline or a retrieval score, and show it next to the answer.

<ConfidenceBadge />

Live preview

High confidence· 92%Medium confidence· 58%Low confidence· 24%

Installation

No dependencies to install — just React + Tailwind CSS. It's a presentational component (no data fetching), so the same source works unchanged in React and Next.js (App or Pages Router) — there's no separate variant. Copy it into your project (e.g. components/ConfidenceBadge.tsx) and import it.

Usage

usage.tsx

import { ConfidenceBadge } from "@/components/ConfidenceBadge";

export default function Example() {
  return (
    <ConfidenceBadge score={0.86} />
  );
}

Props

Prop	Type	Default	Description
`score`required	`number`	—	Confidence/groundedness score in the 0–1 range.
`showValue`	`boolean`	true	Show the numeric percentage.

Component source copy-paste ready

Presentational component — no data fetching, so the same source works unchanged in React and Next.js. There's no separate Next.js variant to copy.

ConfidenceBadge.tsx

"use client";

interface ConfidenceBadgeProps {
  /** Groundedness / confidence score in the 0–1 range. */
  score: number;
  /** Show the numeric percentage alongside the label. Default: true. */
  showValue?: boolean;
  className?: string;
}

function bucket(score: number) {
  if (score >= 0.75) return { label: "High confidence", color: "#10b981", bg: "rgba(16,185,129,0.12)" };
  if (score >= 0.45) return { label: "Medium confidence", color: "#f59e0b", bg: "rgba(245,158,11,0.12)" };
  return { label: "Low confidence", color: "#ef4444", bg: "rgba(239,68,68,0.12)" };
}

/**
 * ConfidenceBadge — a compact badge for an answer's groundedness/confidence
 * score. Pair it with a self-grading step in your pipeline (or a retrieval
 * score) and surface it next to the answer.
 */
export function ConfidenceBadge({ score, showValue = true, className = "" }: ConfidenceBadgeProps) {
  const s = Math.max(0, Math.min(1, score));
  const { label, color, bg } = bucket(s);
  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium ${className}`}
      style={{ color, background: bg }}
    >
      <span className="h-1.5 w-1.5 rounded-full" style={{ background: color }} />
      {label}
      {showValue && <span className="opacity-70">· {(s * 100).toFixed(0)}%</span>}
    </span>
  );
}