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

Prop	Type	Default	Description
`level`	`"high" \| "medium" \| "low" \| "unknown"`	—	Confidence level (required)
`variant`	`"badge" \| "dot" \| "inline"`	`"badge"`	Visual variant
`label`	`string`	—	Override default label text

Levels

Level	Color	Default label
`high`	Emerald	High confidence
`medium`	Amber	Medium confidence
`low`	Red	Low confidence
`unknown`	Gray	Confidence unknown