ConfidenceBadge

Visual indicator for AI confidence levels. Available as a colored badge, a minimal dot, or inline text. The visual language for "I'm confident," "I'm uncertain," and "you should verify this."

ConfidenceBadge — All Variants

Badge (default)

High confidenceMedium confidenceLow confidenceConfidence unknown

Dot

Verified fact Likely correct Uncertain

Inline

The earth is approximately 4.5 billion years old. High confidence

The population of this city is around 2.3 million. Approximate

This feature was likely introduced in version 3.2. Low confidence

Custom labels

VerifiedMay be outdatedNeeds reviewNo data

Import

tsx
import { ConfidenceBadge } from "@arc-lo/ui";

Variants

tsx
{/* Full badge with dot + label */}
<ConfidenceBadge level="high" />
<ConfidenceBadge level="medium" />
<ConfidenceBadge level="low" />
<ConfidenceBadge level="unknown" />

{/* Minimal dot */}
<ConfidenceBadge level="high" variant="dot" />

{/* Inline text */}
<ConfidenceBadge level="low" variant="inline" />

Custom labels

tsx
<ConfidenceBadge level="high" label="Verified" />
<ConfidenceBadge level="low" label="May be outdated" />

Props

PropTypeDefaultDescription
level"high" | "medium" | "low" | "unknown"Confidence level (required)
variant"badge" | "dot" | "inline""badge"Visual variant
labelstringOverride default label text

Levels

LevelColorDefault label
highEmeraldHigh confidence
mediumAmberMedium confidence
lowRedLow confidence
unknownGrayConfidence unknown