CitationLink

Inline source reference for generated text. Renders an anchor when given a url and an inert span otherwise — the doc-noteref role is only applied to the interactive form.

Examples

Numbered references

Hover a citation to preview its source.

The transformer architecture1 remains the basis for current language models2 , though the training recipe has changed considerably3.

The transformer architecture <CitationLink number={1}
  title="Attention Is All You Need" url="https://arxiv.org/abs/1706.03762" />
remains the basis for current models <CitationLink number={2}
  title="Language Models are Few-Shot Learners" url="https://arxiv.org/abs/2005.14165" />.

Label variant

Attention Is All You Need A source with a very long title that gets truncated at fifteen em

<CitationLink variant="label" number={1}
  title="Attention Is All You Need" url="https://arxiv.org/abs/1706.03762" />
<CitationLink variant="label" number={2} title="A source with a very long title that truncates" />

Props

Prop	Type	Default	Description
`number`	`number`	`—`	Reference index. Shown in the number variant, used in the accessible name.
`title`	`string`	`—`	Source title — the chip text and the hover preview.
`url`	`string`	`—`	Makes it a link (new tab, rel="noopener noreferrer").
`icon`	`string`	`—`	Favicon URL for the label variant.
`variant`	`'number' \| 'label'`	`'number'`	Superscript pill or titled chip.
`preview`	`boolean`	`true`	Hover preview via Tooltip.

Install

CLI

npx @a3tai/mittsu add citation-link

Peer dependency

npm install bits-ui