Overview
AIConfidenceIndicator displays AI prediction confidence levels in multiple visual formats: badge, meter, or ring. Color-coded by confidence level (high: green, medium: amber, low: red). Perfect for inline display alongside AI-generated content, predictions, or automated insights.
Features
- Three display variants: badge, meter, ring
- Automatic color coding by confidence level
- Three size options: sm, md, lg
- Optional label text
- Percentage display
Examples
Badge Variant
Inline confidence badge
High:92%
Medium:65%
Low:35%
Badge with Label
Badge with confidence label
Confidence:88%Confidence:55%Confidence:28%
Badge Sizes
Size variants
85%sm
85%md
85%lg
Meter Variant
Horizontal progress bar
Confidence
92%
Confidence
65%
Confidence
35%
Meter Sizes
Meter size variants
sm:
78%
md:
78%
lg:
78%
Ring Variant
Circular progress ring
95%
68%
42%
Ring Sizes
Ring size variants
85%
85%
85%
In Context
Example usage with AI content
92%
Positive Sentiment Detected
The feedback indicates strong satisfaction with the product features.
58%
Feature Request Identified
User may be requesting dark mode functionality (moderate confidence).
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
confidence | number | required | Confidence value from 0-100 |
variant | 'badge' | 'meter' | 'ring' | 'badge' | Display variant |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the indicator |
showLabel | boolean | false | Show "Confidence:" label |
className | string | - | Additional CSS classes |
Color Levels
Confidence levels are automatically color-coded:
- High (80-100%): Green - High confidence in the prediction
- Medium (50-79%): Amber/Warning - Moderate confidence
- Low (0-49%): Red/Destructive - Low confidence, review recommended
Usage
import { AIConfidenceIndicator } from '@/ui/components/charts';
// Badge variant (default)
<AIConfidenceIndicator confidence={85} />
<AIConfidenceIndicator confidence={85} showLabel />
// Meter variant
<AIConfidenceIndicator confidence={72} variant="meter" />
<AIConfidenceIndicator confidence={72} variant="meter" showLabel size="lg" />
// Ring variant
<AIConfidenceIndicator confidence={95} variant="ring" />
<AIConfidenceIndicator confidence={95} variant="ring" showLabel size="lg" />