Confidence Progress Bar

Explainability

Visual progress bar for displaying AI confidence levels with threshold markers, color-coded status, and multiple display variants.

Preview

Default variant with label and threshold marker

Model Confidence85%

Variants

Three display variants for different contexts

Default

High Confidence92%

Medium Confidence74%

Low Confidence45%

Compact

88%

65%

32%

Detailed

Task Prioritizer95%

80%

Above approval threshold

Schedule Optimizer72%

80%

Below threshold - human review required

Confidence Levels

Color coding based on confidence score

High (80-100%)

90%

Medium (60-79%)

70%

Low (0-59%)

40%

Custom Thresholds

Different threshold values for various use cases

Standard Threshold (80%)85%

High Threshold (90%)85%

Low Threshold (70%)85%

Props

ConfidenceProgressBar component API reference

Prop	Type	Default	Description
`confidence*`	`number`	—	Confidence value from 0-100
`threshold`	`number`	`80`	Threshold marker position
`label`	`string`	—	Optional label text
`showPercentage`	`boolean`	`true`	Show percentage value
`variant`	`'default' \| 'compact' \| 'detailed'`	`'default'`	Display variant
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

import { ConfidenceProgressBar } from '@/components/ui/confidence-progress-bar'

export default function Example() {
  return (
    <>
      {/* Default variant */}
      <ConfidenceProgressBar
        confidence={92}
        label="Model Confidence"
        threshold={80}
      />

      {/* Compact variant */}
      <ConfidenceProgressBar
        confidence={75}
        variant="compact"
      />

      {/* Detailed variant */}
      <ConfidenceProgressBar
        confidence={88}
        variant="detailed"
        label="Risk Assessment"
        threshold={85}
      />
    </>
  )
}

Features

Built-in functionality

Three variants: Default, compact, and detailed display modes
Threshold markers: Visual indicator showing approval threshold
Color coding: Emerald for high, amber for medium, rose for low confidence
Animated fill: Smooth 500ms transition animation for changes
Threshold status: Detailed variant shows if value meets threshold
Optional percentage: Toggle percentage display on/off
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Component uses semantic HTML structureConfidence value is displayed as visible textThreshold status is communicated textually in detailed variant

Keyboard Navigation

Key	Action
`N/A`	Component is display-only, no interactive elements

Notes

Percentage is shown numerically, not just visually
Threshold marker has visual distinction
Color provides additional context but not sole indicator
Detailed variant explains threshold status in text

Related Components

Confidence Indicator Progress AI Confidence Indicator Badge