A React badge component that visually displays an AI confidence score with dynamic color coding based on confidence level thresholds. ## Key Components ### `ConfidenceBadgeProps` | Prop | Type | Default | Description | |---|---|---|---| | `confidence` | `number` | — | Confidence score (0–100) | | `showLabel` | `boolean` | `true` | Show text label (e.g., "High", "Low") | | `showPercentage` | `boolean` | `true` | Show numeric percentage | | `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Controls padding/sizing | | `className` | `string` | — | Additional CSS classes | ### Confidence Utilities Used - `getConfidenceLevel` — maps score to level (`'none'`, `'low'`, `'medium'`, `'high'`) - `getConfidenceLabel` — returns display label string - `getConfidenceBorderClass` / `getConfidenceTextClass` / `getConfidenceBgClass` — return Tailwind classes for theming > **Note:** Returns `null` when `confidence` is `undefined` or resolves to level `'none'`. ## Usage Example ```typescript import { ConfidenceBadge } from '@openframe/ui' // Full badge with label and percentage // Percentage only, large size // Label only, custom class // Renders nothing — confidence level is 'none' ``` **Source:** [`ConfidenceBadge.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ConfidenceBadge.tsx)