AI Status Indicator
Unified component for displaying confidence levels, AI capability boundaries, and sentiment analysis. Consolidates multiple status patterns into a single flexible component with badge, inline, card, detailed, and progress variants.
Confidence — Badge
Compact confidence indicator with tooltip
Confidence — Progress
Progress bar visualization
Confidence — Card
Card with reasoning and sources
Based on multiple corroborating sources and recent data from verified publications.
Based on 3 sources
Confidence — Low Confidence Card
Warning state with low confidence
Limited sources available. Information may be outdated or incomplete.
Based on 1 source
Capability — Badge
Compact capability status badge
Capability — Card
Detailed capability list with statuses
Sandboxed environment only
Disabled for this conversation
Capability — Limitations Only
Filtered view showing only limitations
Sandboxed environment only
Disabled for this conversation
Sentiment — Badge
Compact sentiment indicator
Sentiment — Card
Detailed sentiment breakdown with emotions
Detected emotions
Sentiment — Mixed
Mixed sentiment analysis
Detected emotions
Props
AIStatusIndicator component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
type* | 'confidence' | 'capability' | 'sentiment' | — | Type of status indicator — determines data model and visual treatment |
variant | 'badge' | 'inline' | 'card' | 'detailed' | 'progress' | 'badge' | Display variant |
title | string | — | Override the default title label |
confidence | ConfidenceData | — | Confidence data object (for type="confidence") |
capabilities | Capability[] | — | Array of capability items (for type="capability") |
sentiment | SentimentData | — | Sentiment analysis data (for type="sentiment") |
showTrend | boolean | false | Show trend direction indicator |
collapsible | boolean | false | Allow card/detailed variants to collapse |
defaultCollapsed | boolean | false | Start in collapsed state |
showOnlyLimitations | boolean | false | Filter capability list to show only non-available items |
onLearnMore | () => void | — | Callback for the learn more action in card footer |
Type Interfaces
Data models for each status type
// Confidence datainterface ConfidenceData { value: number // 0-100 confidence score sources?: { title: string; url?: string }[] reasoning?: string // Explanation of confidence level trend?: number[] // Historical values for trend}
// Capability datatype CapabilityStatus = 'available' | 'limited' | 'unavailable' | 'restricted'interface Capability { id: string name: string status: CapabilityStatus limitation?: string // Explanation when limited/restricted alternative?: string // Suggested alternative}
// Sentiment datatype SentimentValue = 'positive' | 'negative' | 'neutral' | 'mixed'interface SentimentData { overall: SentimentValue confidence: number scores?: { positive: number; negative: number; neutral: number } emotions?: { name: string; intensity: number }[]}Usage
Import and basic examples
import { AIStatusIndicator } from '@/blocks/ai-transparency/ai-status-indicator'
// Confidence badge<AIStatusIndicator type="confidence" confidence={{ value: 87, reasoning: 'Based on verified sources' }}/>
// Capability card<AIStatusIndicator type="capability" variant="card" capabilities={[ { id: '1', name: 'Text Generation', status: 'available' }, { id: '2', name: 'Web Browsing', status: 'restricted', limitation: 'Disabled' }, ]} collapsible/>
// Sentiment analysis<AIStatusIndicator type="sentiment" variant="card" sentiment={{ overall: 'positive', confidence: 89, scores: { positive: 65, negative: 10, neutral: 25 }, emotions: [{ name: 'Joy', intensity: 72 }], }}/>Built With
3 componentsThis block uses the following UI components from the design system:
Consolidation Note
Which blocks this replaces
Unified Component
This component consolidates the functionality of three previously separate blocks:
- Confidence Indicator — now
type="confidence" - AI Capability Boundary — now
type="capability" - AI Sentiment Indicator — now
type="sentiment"
Features
Built-in functionality
- Three status types: Confidence, capability, and sentiment analysis in one component
- Five display variants: Badge, inline, card, detailed, and progress bar modes
- Color-coded levels: Automatic color mapping based on confidence/status values
- Collapsible cards: Cards can be collapsed to save space
- Trend indicators: Show directional trends for confidence scores
- Source attribution: Link to sources that inform confidence scores
- Emotion detection: Sentiment type supports granular emotion display
- Capability filtering: Show all capabilities or only limitations
- Tooltip integration: Badge variants show details on hover
- Dark mode support: Full dark mode styling throughout
Accessibility
Accessibility considerations
ARIA Attributes
Status values conveyed through text labels, not just colorTooltips accessible via keyboard focusCollapsible state communicated to screen readersKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between interactive elements |
| Enter / Space | Toggle collapse and activate links |
Notes
- Color-coded levels always paired with text labels for colorblind users
- Badge tooltips use TooltipProvider for consistent behavior
- Progress bars include numeric values for screen readers