InlineCitation
A numbered citation marker inside AI-generated text that links to its source and previews it in a hover card
Category: display · WCAG 2.2-AA · ai, citation, sources, footnote, references, provenance
Props
| Prop | Type | Default | Description |
|---|---|---|---|
index | number | — | The visible citation number — the source’s position in the matching Sources list. |
source | AiSource | — | The cited source (`title`, `url`, optional `description`). Only absolute http(s) URLs become links. |
labels | { source?: string } | — | Overrides for the component’s user-visible strings (i18n). `source` may contain `{index}`; the accessible name is "<source>: <title>". |
Design tokens
--cascivo-color-ai-subtle--cascivo-color-ai-sheen--cascivo-color-text--cascivo-color-text-muted--cascivo-radius-full--cascivo-focus-ring
When to use
- Attributing a claim in an AI answer to the source it came from, right where the claim is made
When not to use
- Listing every source of an answer — use Sources (and number the citations to match)
- General footnotes in authored content — use a plain link or Prose
How to build an accessible InlineCitation in React →
Examples
In a sentence
<p>
Refunds are available for 30 days.
<InlineCitation index={1} source={{ title: 'Refund policy', url: 'https://example.com/refunds' }} />
</p>