Trust badge

The verification badge is the most important component in the system. It's the thing that tells users whether a claim has been checked — and by whom.

Self-reported

Usage#

Tiers never map to emotion. T3 is not “good” — it's “audited”. T1 is not “bad” — it's “unverified”. A T1 product can be excellent; it just hasn't been independently checked.
Color is calibrated to verification depth. Gray (T1) reads neutral; blue (T2) reads cross-checked; green (T3) reads institutional. Do not swap palettes.
Hover always reveals an explanation. The tooltip is not decorative. Users should never have to guess what a tier means.
T2 and T3 should link to a source. If the claim is checkable, the badge is the shortcut to the check.
Do not invent a T4. The tier system is fixed. New verification depth means changing the definition of T3, not adding a fourth level.

Props#

Name	Type	Default	Description
tier*	"t1" \| "t2" \| "t3"	—	Verification tier. T1 self-reported, T2 community, T3 audited.
label	string	—	Override the default tier label.
sourceUrl	string	—	When provided, the badge becomes a link to the source of the claim.

Code#

tsx

import { TrustBadge } from "@/components/ui/TrustBadge";

<TrustBadge tier="t1" />
<TrustBadge tier="t2" sourceUrl="https://example.com/source" />
<TrustBadge tier="t3" sourceUrl="https://example.com/audit" />

Accessibility#

Tooltip is keyboard-accessible via focus. Screen readers read the tooltip content on focus.
The badge never relies on color alone — the tier label is always present.
When sourceUrl is set, the badge is a real link and announces “view source”.