AI Components / AI Confidence Badge
AI Confidence Badge
AI model confidence score badge with animated transitions, tooltip, sparkline history, 3 sizes, keyboard accessible. Renamed from `ai-badge` to clarify its purpose vs. the generic `cg-badge` status pill.
ai-display v0.1.0
Playground
Examples
Confidence levels
<cg-stack direction="row" gap="md"><ai-confidence-badge score="0.95"></ai-confidence-badge><ai-confidence-badge score="0.65"></ai-confidence-badge><ai-confidence-badge score="0.25"></ai-confidence-badge></cg-stack>Large with bar
<ai-confidence-badge score="0.88" size="lg" explanation="Based on 5 data sources"></ai-confidence-badge>Import
import { AiConfidenceBadge } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-confidence-badge';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
score | number | 0.85 | Confidence 0-1 |
size | "sm" | "md" | "lg" | "md" | Size variant |
explanation | string | — | Tooltip explanation |
history | number[] | — | History for sparkline |
highThreshold | number | 0.8 | High threshold |
lowThreshold | number | 0.5 | Low threshold |
Events
| Event | Detail | Description |
|---|---|---|
ai-confidence-badge-click | {score, level} | Badge clicked |