How to build an accessible AiBadge in React

Provenance is carried by text, never by colour: the static marker shows "AI" and reads "AI-generated"; the interactive one is a button whose accessible name begins with its visible text ("AI Show information", WCAG 2.5.3), opening a Toggletip that is dismissable with Escape. The revert state is a real button with an accessible name ("Revert to AI suggestion"). Forced colours keep the border and text as CanvasText

When to use a AiBadge

• Marking a field, card, table cell or message whose content an AI produced or suggested
• Giving readers an on-demand explanation of how AI was involved (model, sources, confidence)
• Offering a way back to the AI version after a person edits an AI-filled value (`edited` + `onRevert`)

When not to use it

• Reporting that generation is in progress — use AiStatus
• Generic status or category chips — use Badge or Tag

Keyboard interactions

Role button, verified at WCAG 2.2-AA.

• Enter
• Space
• Escape

Common mistakes

Avoid: A sparkle icon alone next to AI content

Prefer: <AiBadge /> — visible "AI" text and an accessible description

An icon or gradient carries no meaning for assistive tech; the badge names the provenance

Example

<AiBadge edited onRevert={() => {}} />

See the full AiBadge reference →