AI Confidence

Indication of confidence in an AI result.

html

<div class="ai-confidence ai-confidence--medium">
  <span class="ai-confidence__icon" aria-hidden="true">
    <span class="glyph glyph--high">&#9650;</span>
    <span class="glyph glyph--medium">&#9679;</span>
    <span class="glyph glyph--low">&#9660;</span>
  </span>
  <p class="ai-confidence__text">
    <span class="ai-confidence__label">Confidence:</span>
    <span class="ai-confidence__level">medium</span>
    <span class="ai-confidence__score">72%</span>
  </p>
</div>
<style>
.ai-confidence { display: inline-flex; align-items: center; gap: 8px; font: 14px/1.4 system-ui, sans-serif; padding: 8px 12px; border-radius: 10px; background: #24143008; color: #241430; }
.ai-confidence__icon { display: inline-flex; font-size: 13px; }
.ai-confidence__icon .glyph { display: none; }
.ai-confidence--high .glyph--high, .ai-confidence--medium .glyph--medium, .ai-confidence--low .glyph--low { display: inline; }
.ai-confidence--high { border-left: 3px solid #241430; }
.ai-confidence--high .ai-confidence__icon { color: #2F8F5B; }
.ai-confidence--medium .ai-confidence__icon { color: #B4790A; }
.ai-confidence--low .ai-confidence__icon { color: #B4432F; }
.ai-confidence--high { box-shadow: inset 0 0 0 1.5px #2F8F5B55; }
.ai-confidence--medium { box-shadow: inset 0 0 0 1.5px #B4790A55; }
.ai-confidence--low { box-shadow: inset 0 0 0 1.5px #B4432F55; }
.ai-confidence__text { margin: 0; }
.ai-confidence__label { font-weight: 600; margin-right: 4px; }
.ai-confidence__level { text-transform: capitalize; font-weight: 700; }
.ai-confidence__score { margin-left: 6px; color: #24143099; }
</style>

tailwind

<div class="ai-confidence-tw ai-confidence-tw--medium inline-flex items-center gap-2 font-sans text-sm px-3 py-2 rounded-[10px] bg-[#24143008] text-[#241430]">
  <span class="ai-confidence-tw__icon inline-flex text-[13px]" aria-hidden="true">
    <span class="glyph glyph--high">&#9650;</span>
    <span class="glyph glyph--medium">&#9679;</span>
    <span class="glyph glyph--low">&#9660;</span>
  </span>
  <p class="m-0">
    <span class="font-semibold mr-1">Confidence:</span>
    <span class="capitalize font-bold">medium</span>
    <span class="ml-1.5 text-[#24143099]">72%</span>
  </p>
</div>
<style>
.ai-confidence-tw__icon .glyph { display: none; }
.ai-confidence-tw--high .glyph--high, .ai-confidence-tw--medium .glyph--medium, .ai-confidence-tw--low .glyph--low { display: inline; }
.ai-confidence-tw--high .ai-confidence-tw__icon { color: #2F8F5B; }
.ai-confidence-tw--medium .ai-confidence-tw__icon { color: #B4790A; }
.ai-confidence-tw--low .ai-confidence-tw__icon { color: #B4432F; }
.ai-confidence-tw--high { box-shadow: inset 0 0 0 1.5px #2F8F5B55; }
.ai-confidence-tw--medium { box-shadow: inset 0 0 0 1.5px #B4790A55; }
.ai-confidence-tw--low { box-shadow: inset 0 0 0 1.5px #B4432F55; }
</style>

react

export function AiConfidence({
  label = "Confidence",
  level = "medium",
  score = 72,
  showScore = true,
}) {
  const palette = {
    high: { icon: "\u25B2", color: "#2F8F5B" },
    medium: { icon: "\u25CF", color: "#B4790A" },
    low: { icon: "\u25BC", color: "#B4432F" },
  }[level] ?? { icon: "\u25CF", color: "#B4790A" };
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, padding: "8px 12px",
      borderRadius: 10, background: "#24143008", color: "#241430", boxShadow: `inset 0 0 0 1.5px ${palette.color}55`,
      fontFamily: "system-ui, sans-serif" }}>
      <span aria-hidden="true" style={{ fontSize: 13, color: palette.color }}>{palette.icon}</span>
      <p style={{ margin: 0 }}>
        <span style={{ fontWeight: 600, marginRight: 4 }}>{label}:</span>
        <span style={{ textTransform: "capitalize", fontWeight: 700 }}>{level}</span>
        {showScore && <span style={{ marginLeft: 6, color: "#24143099" }}>{score}%</span>}
      </p>
    </div>
  );
}