Usage

Citation marks a source inside a sentence. The label variant is a chip with the source title. The number variant is a compact superscript. Pass number as the 1-based index; it is spoken in the accessible name and shown by the number variant.

When source.url is set, the citation is a link that opens in a new tab and uses role="doc-noteref". Without a URL it is a <span> and does not claim to be a link. The accessible name is localized, for example “Citation 2: Release notes”. The visible title falls back to the number when source.title is empty.

source.icon wins over source.src. A value that looks like a URL or a path is drawn as an image. Any other string is passed to Icon as a CSS class. The icon is only drawn for the label variant.

<script setup lang="ts">
import { Citation } from '@astryx-vue/core/Citation'
</script>

<template>
  <p>
    See
    <Citation :number="1" :source="{ title: 'Release notes', url: 'https://example.com/notes' }" />
    <Citation :number="1" variant="number" :source="{ title: 'Release notes', url: 'https://example.com/notes' }" />
  </p>
</template>

Anatomy

Element	Description
Container	The root wrapper. Accepted source URLs render an anchor; missing or rejected URLs render an inert span.
Icon	An optional source icon shown before the label text. Accepts a favicon/logo image URL (via source.src) or slot content such as an Astryx <Icon>. Only available in the label variant.
Label text	The source title, truncated with ellipsis when it exceeds the max width. Shown in the label variant.
Number	The citation index displayed as a superscript badge. Shown in the number variant.

Best practices

Guidance	Practices
Do	Keep number stable for a source inside one answer, so the chip and the superscript refer to the same note.
Do	Give title the name a person would recognize. The number is only a fallback.
Do	Use the number variant in dense paragraphs, and the label variant where the source name should be readable without a footnote.
Don't	Put a long sentence in title. The chip clips, and the accessible name would be the whole sentence.
Don't	Use a citation as a general link. It is a note reference, not a navigation control.

Examples

Citation — Inline Text

React uses a virtual DOM to minimize expensive DOM operations1. This approach was inspired by earlier functional UI frameworks2. TypeScript adds static types to JavaScript for safer refactoringTypeScript Documentation.

Citations embedded within a paragraph of text, showing how they flow inline with surrounding content.

Citation — Source List

Sources

React DocumentationTypeScript HandbookMDN Web DocsW3C WAI-ARIA Specification

A list of citation sources with icons, as you might show at the end of an AI-generated response or article footer.