React Confidence / Uncertainty Meter

Copy Page

A single confidence number invites false precision, and a confident-looking green bar on a wrong answer is exactly the failure this component exists to prevent. So it draws the calibrated band around the estimate, not just a point — and never signals the level by colour alone.

Installation

Props

The band is the honesty

A model that says "92%" is really saying "somewhere around 92%", and rendering it as a single hard line implies a precision the number doesn't have. The meter shades the calibrated band — the range the true value likely falls in — behind the point marker, and prints it (88–96%) so the reader sees the spread, not just the midpoint. A wide band on a high number is a very different thing to act on than a tight one.

Never colour alone

The level (High / Moderate / Low) is carried three ways at once: a word, a shield icon whose shape changes, and the bar treatment. That redundancy is not decoration — it is the Kelvin house rule that a colour-blind reader, a greyscale print, or a glance too quick to register hue must still get the message. And low confidence doesn't merely turn red; it says, in text, verify this before relying on it, because the whole point of surfacing uncertainty is to change what the reader does with the answer.