Citation

Citations display inline references to external sources. Use them to attribute information within AI-generated responses, articles, or anywhere provenance and source links are needed.

Installation

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

Requires React 19+, base CSS and a Theme provider. See Setup.

Citation

Citations display inline references to external sources. Use them to attribute information within AI-generated responses, articles, or anywhere provenance and source links are needed.

Prop	Type	Default	Description
source *	CitationSource		The citation source object containing title, url, an optional image src, and an optional icon node. The url follows the shared navigation rule described on the Link `href` prop; rejected destinations leave the citation visible without navigation. Image src uses separate resource handling.
number *	number		The display index for this citation.
variant	'label' \| 'number'	'label'	Display style: a label chip showing the source title or a compact numbered badge.

Usage guidance

Use the label variant when the source title adds meaningful context for the reader.
Use the number variant for compact inline references within body text, like footnotes.
Avoid: Mix label and number variants in the same paragraph. Pick one style per context for visual consistency.

Theming API

{
  "targets": [
    {
      "className": "astryx-citation",
      "visualProps": [
        "variant"
      ]
    }
  ]
}

Anatomy

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 a React node 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.

Examples

Citation — Showcase: All citation variants at a glance: label chips and numbered badges, with and without icons and links.
Citation — Inline Text: Citations embedded within a paragraph of text, showing how they flow inline with surrounding content.
Citation — Source List: A list of citation sources with icons, as you might show at the end of an AI-generated response or article footer.