Skip to content
Tattva

ConfidenceIndicator

Stable

Three bars and a label that show how sure the assistant is about an answer.

Also known as confidence score, certainty, uncertainty indicator

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

All levels

Low confidenceLow confidence. Verify before relying on this.Medium confidenceModerate confidence. Spot-check key facts.High confidenceHigh confidence, supported by multiple sources.

Low fills one bar, medium two and high three.

UsageCodeDesignAccessibility

When to use it

Tells people how far to trust an answer. Bars, a word and a sentence all say the same thing, so nobody needs to see color to read it.

Made of: Bars · Label · Hidden explanation (for screen readers)

Use it for

  • Beside a reply or fact that is not always reliable.
  • Next to an extracted value that a person may need to check.

Not for

  • The model's own rating of itself, or any number you have not measured (see the Trust and safety guide).
  • How much of something is used: use Meter.
  • Saying that content was made by AI: use AILabel.

Do and avoid

Low confidenceLow confidence. Verify before relying on this.
Do. Bars and words together, so color is never the only clue.
Avoid. A lone colored dot says nothing to people who cannot see color.

Do

  • Show it near the answer it describes, like at the bottom of a message.
  • Base the level on something real: how well the sources support the answer, how much of the question was covered, or a success rate you measured on real cases. Write down what each level means for your product.
  • When confidence is low, suggest a next step, like checking sources.
  • Leave it out when you have no real signal. No label is better than one that guesses.

Avoid

  • Do not drive it from the model's own rating of itself ("I am 90% sure"). Models are often sure and wrong.
  • Do not show a percentage you have not measured; a number looks more exact than it is.
  • Do not put it on every answer as decoration.
  • Do not drop the words to save space. They are the main clue.
  • Do not add levels beyond low, medium and high.

On a phone

  • It stays on one line: bars, then the badge.
  • The longer sentence, such as "Verify before relying on this", is only a hover tooltip and a screen reader line, so on a phone the bars and the badge word carry the meaning.
  • The badge text is at least 12px on touch screens.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started