Evidence Confidence indicator

Development preview of the reusable EvidenceConfidenceIndicator component. It renders a confidence state that has already been determined elsewhere. It does not calculate, infer or modify any score, and it is not yet used anywhere on the site.

The four levels are an ordinal scale. They are not percentages and carry no implied probability.

All four states, both themes

Each panel forces its own theme so the two can be compared directly, regardless of the theme currently selected in the navbar.

Light page

1 active segment (red) + 3 inactive

2 active segments (yellow) + 2 inactive

3 active segments (orange) + 1 inactive

4 active segments (green)

Dark page

1 active segment (red) + 3 inactive

2 active segments (yellow) + 2 inactive

3 active segments (orange) + 1 inactive

4 active segments (green)

Geometry check

The states are stacked so the segment columns line up. Every block in every column should share one width, one height and one spacing, with only the fill colour changing between active and inactive.

Light page

Dark page

Segment proportions

Three candidate block proportions for comparison. These are set by the demo page only; the component itself ships the standard size and the API is unchanged.

Light page

Compact — 14 x 10px segments

Standard — 18 x 10px segments (current default)

Wide gauge — 24 x 8px segments

Dark page

Compact — 14 x 10px segments

Standard — 18 x 10px segments (current default)

Wide gauge — 24 x 8px segments

Without colour

The same states rendered greyscale. Confidence must still be readable from the number of filled segments and the written label alone.

Light page, greyscale

1 active segment (red) + 3 inactive

2 active segments (yellow) + 2 inactive

3 active segments (orange) + 1 inactive

4 active segments (green)

Dark page, greyscale

1 active segment (red) + 3 inactive

2 active segments (yellow) + 2 inactive

3 active segments (orange) + 1 inactive

4 active segments (green)

In context

The indicator is inline, so it sits inside running text and table cells without changing line height.

Light page

Circadian misalignment and cortisol disruption is one of several findings that qualify how this mechanism should be read.

Finding	Evidence confidence
Diurnal cortisol as a timing mechanism
Gut-related modulation of waking cortisol

Dark page

Circadian misalignment and cortisol disruption is one of several findings that qualify how this mechanism should be read.

Finding	Evidence confidence
Diurnal cortisol as a timing mechanism
Gut-related modulation of waking cortisol

Usage

The component is registered for MDX, so pages can use it directly. It takes one required prop.

<EvidenceConfidenceIndicator level="moderate" />

level: "very-low" | "low" | "moderate" | "high"   (required)
className: string                                  (optional)
srPrefix: string                                   (optional, default "Evidence confidence")

Each instance exposes a single accessible label, for example “Evidence confidence: Moderate, level 3 of 4”. The individual segments are hidden from assistive technology so they are not announced one by one.