Confidence Indicator

Explainability

Visual indicator for AI model confidence levels with color-coded feedback, progress bar visualization, and expandable source verification.

Preview

Full-size indicator with sources and progress bar

Confidence

92%

Based on 3 verified sources

Sizes

Two size variants for different contexts

Medium (default)

Confidence

87%

Based on 2 verified sources

Small (for datagrids)

Task	Status	Confidence
Update documentation	Completed	92%
Review pull request	In Progress	67%
Deploy to production	Blocked	45%

Confidence Levels

Color coding based on confidence score

92%

High (80-100%)

67%

Medium (60-79%)

45%

Low (0-59%)

Props

ConfidenceIndicator component API reference

Prop	Type	Default	Description
`confidence`	`number`	`85`	Confidence percentage (0-100)
`sources`	`Source[]`	`[]`	Array of source references
`showExplanation`	`boolean`	`false`	Show explanation text below progress bar
`size`	`'sm' \| 'md'`	`'md'`	Size variant - 'sm' for compact datagrid use
`className`	`string`	—	Additional CSS classes

Source Type

Prop	Type	Default	Description
`title*`	`string`	—	Source title
`domain*`	`string`	—	Source domain name
`url*`	`string`	—	Link URL

Usage

Import and implementation example

import { ConfidenceIndicator } from '@/components/ui/confidence-indicator'

export default function Example() {
  return (
    <>
      {/* Default size with sources */}
      <ConfidenceIndicator
        confidence={92}
        showExplanation={true}
        sources={[
          { title: 'React Documentation', domain: 'react.dev', url: '#' },
          { title: 'Understanding Hooks', domain: 'blog.logrocket.com', url: '#' },
        ]}
      />

      {/* Small size for datagrids and lists */}
      <ConfidenceIndicator size="sm" confidence={87} />
    </>
  )
}

Features

Built-in functionality

Color-coded levels: Teal for high, amber for medium, rose for low confidence
Progress bar: Visual bar showing confidence percentage
Size variants: Compact sm size for datagrids, md for full display
Source verification: Expandable list of verified sources
Explanation text: Optional source count explanation
External links: Sources open in new tab with proper rel attributes
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Sources toggle is a native button elementSource links have proper target and rel attributesConfidence value is displayed as text

Keyboard Navigation

Key	Action
`Tab`	Navigate to sources toggle and links
`Enter / Space`	Expand/collapse sources list

Notes

Confidence is shown numerically, not just as color
Badge provides semantic status indication
Source count is communicated in text
Shield icon provides visual identification

Related Components

Confidence Progress Bar AI Confidence Indicator Badge Provenance Trail