Confidence Meter
How sure a model is, in five steps. Segmented on purpose — a smooth bar invites reading 0.834 as different from 0.851, which is not what a calibration score supports.
src/components/ui/confidence-meter.tsxAbout
From the component's own source, where it was written.
A model's confidence in an answer.
Segmented rather than continuous, deliberately. A smooth bar invites reading 0.834 as meaningfully different from 0.851, which is not what a calibration score supports. Five steps say "fairly confident" and stop there.
The band label is the accessible name, so a screen reader hears "confidence: high" instead of a percentage that implies more precision than exists.
Install
npx astralyx-ui add confidence-meter
Usage
import { ConfidenceMeter } from '@/components/ui/confidence-meter'
<ConfidenceMeter value={0.82} />Composer
Change the props and the source below follows.
<ConfidenceMeter value={0.75} showLabel={true} />Examples
Bands
<ConfidenceMeter value={0.15} />
<ConfidenceMeter value={0.55} />
<ConfidenceMeter value={0.95} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
ConfidenceMeter
A model's confidence in an answer.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | required | 0 to 1. Mapped to one of five bands. |
| label | ReactNode | 'Confidence' | The band name is the accessible value too — a screen reader hears "high", not a percentage implying more precision than exists. |
| showLabel | boolean | true | The band name is the accessible value too — a screen reader hears "high", not a percentage implying more precision than exists. |
| hint | ReactNode | — | — |
| size | 'sm' | 'default' | 'default' | Segment height. |
| role | meter | — | With aria-valuetext set to the band, since this is a measurement within a range rather than task progress. |