Confidence mark

Pro

How sure the system is, with what it rests on. Three bars fill for low, medium and high; unknown draws no bars at all, so it can't be read as "low". The word is always printed; the basis is on hover and for screen readers.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/confidence-mark

Brings in: know, locale, tooltip, utils

Usage

TSX · The example above

"use client"

import { ConfidenceMark } from "@/components/confidence-mark"

export default function Example() {
  return (
    <div className="flex flex-wrap gap-4">
      <ConfidenceMark value="high" basis="Two sources agree, one read today." />
      <ConfidenceMark value="medium" basis="One source: the migration was read 2 days ago." />
      <ConfidenceMark value="low" basis="Only the agent's inference; no document covers it." />
      <ConfidenceMark value="unknown" basis="Keel hasn't read anything about this yet." />
    </div>
  )
}

<ConfidenceMark>

Prop	Type	Default	Description
valuerequired	`Confidence`	—	How sure: high, medium, low or unknown.
basisrequired	`string`	—	What the confidence rests on, e.g. "3 sources agree", shown on hover.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under confidenceMark in <LocaleProvider strings={{ … }}>; the table is exported as confidenceMarkStrings.

Key	English
unknown	Unknown confidence
low	Low confidence
medium	Medium confidence
high	High confidence
basis	: {basis}