ConfidenceBadge

Display AI confidence scores with visual indicators. Automatically colors based on confidence level (high, medium, low).

Installation

typescript

import { ConfidenceBadge } from '@happyvertical/smrt-svelte';

Basic Usage

Display confidence scores with automatic color coding.

95% 65% 30%

svelte

<ConfidenceBadge confidence={95} />
<ConfidenceBadge confidence={65} />
<ConfidenceBadge confidence={30} />

Confidence Levels

Colors change automatically based on confidence thresholds.

90% High confidence (80-100%)

60% Medium confidence (50-79%)

25% Low confidence (0-49%)

svelte

<!-- High (80-100): Green -->
<ConfidenceBadge confidence={90} />
<!-- Medium (50-79): Yellow -->
<ConfidenceBadge confidence={60} />
<!-- Low (0-49): Red -->
<ConfidenceBadge confidence={25} />

Sizes

Available in small, medium, and large sizes.

85% 85% 85%

svelte

<ConfidenceBadge confidence={85} size="sm" />
<ConfidenceBadge confidence={85} size="md" />
<ConfidenceBadge confidence={85} size="lg" />

Without Percentage

Hide the percentage text for a minimal bar-only display.

svelte

<ConfidenceBadge confidence={75} showPercent={false} />

Use Cases

Common applications for confidence badges.

OCR Accuracy: 92%

Match Score: 78%

Data Quality: 45%

svelte

<!-- OCR Results -->
<div>OCR Accuracy: <ConfidenceBadge confidence={92} /></div>

<!-- AI Predictions -->
<div>Match Score: <ConfidenceBadge confidence={78} /></div>

<!-- Data Quality -->
<div>Data Quality: <ConfidenceBadge confidence={45} /></div>

Props

Prop	Type	Default	Description
`confidence` *	`number`	-	Confidence value (0-100)
`showPercent`	`boolean`	`true`	Show percentage value
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant

TypeScript

typescript

import { ConfidenceBadge } from '@happyvertical/smrt-svelte';

interface Props {
  confidence: number;  // 0-100
  showPercent?: boolean;
  size?: 'sm' | 'md' | 'lg';
}