Confidence Badge

feedbackCustom

Compact badge flagging extracted fields that need review. Stays hidden for high-confidence values and surfaces "Review" or "Low confidence" otherwise.

Custom component — no upstream reference.

Variants

High Confidence

Low Confidence

Low confidence

<span class="flex-confidence-badge" data-level="low" title="Confidence: 30%">Low confidence</span>

Needs Review

Review

<span class="flex-confidence-badge" data-level="medium" title="Confidence: 65%">Review</span>

With Flags

Low confidence

<span class="flex-confidence-badge" data-level="low" title="ambiguous layout, multi-column text">Low confidence</span>

Contract

Documented variants

HighConfidence — Confidence at or above the high threshold (0.8): renders nothing, no DOM output.
NeedsReview — Confidence between the medium threshold (0.5) and high threshold (0.8): shows a "Review" badge.
LowConfidence — Confidence below the medium threshold (0.5): shows a "Low confidence" badge.
WithFlags — Low confidence badge with explicit extraction flags surfaced in the tooltip title attribute.

Behavior promises

○ Component renders null (no DOM output) when confidence meets or exceeds the high threshold
○ Tooltip title attribute surfaces extraction flags when provided, otherwise shows the numeric confidence percentage

Source CSS

/* flex-confidence-badge — inline status badge for extraction confidence */

.flex-confidence-badge {
  display: inline-block;
  font-size: var(--flex-text-tag);
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--flex-radius-bubble);
  line-height: 1.4;
  white-space: nowrap;

  &[data-level="medium"] {
    background: var(--flex-color-warning-lighter);
    color: var(--flex-color-text);
  }

  &[data-level="low"] {
    background: var(--flex-color-error-lighter);
    color: var(--flex-color-text);
  }
}