AiBadge
Small "AI" marker for AI-generated content; with children it opens a toggletip explaining how AI was involved
Category: display · WCAG 2.2-AA · ai, label, badge, provenance, explainability, generated
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The explanation shown in the toggletip — model, sources, confidence. Omit for a static marker. |
edited | boolean | false | The person has changed the AI’s output. The AI mark gives way to a revert button when `onRevert` is set, and to nothing otherwise — edited content is no longer AI-generated. |
onRevert | () => void | — | Restores the AI version. Shown as an icon button (named by `labels.revert`) while `edited` is true. |
labels | { text?: string; explain?: string; description?: string; revert?: string } | — | Overrides for the component’s user-visible strings (i18n): `text` (the pill, "AI"), `explain` (appended to the trigger’s accessible name), `description` (what a screen reader hears for the static marker), `revert` (the revert button’s accessible name). |
Design tokens
--cascivo-color-ai--cascivo-color-ai-subtle--cascivo-color-ai-border--cascivo-color-text--cascivo-radius-indicator--cascivo-text-xs--cascivo-font-semibold
When to use
- 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
- Reporting that generation is in progress — use AiStatus
- Generic status or category chips — use Badge or Tag
How to build an accessible AiBadge in React →
Examples
Edited, with revert
<AiBadge edited onRevert={() => {}} />Static marker
<AiBadge />With explanation
<AiBadge>This summary was generated by an AI model from the last 30 days of tickets. Check important details.</AiBadge>