Inline Citation

Usage

InlineCitation is the numbered chip that sits in response text and points at its source. Without href it is a static small informative Badge. With href it is an external Link around that Badge, so the source opens in a new tab and says so.

The caller composes the chip text, 1 or 1 · Layout guide, from its own formatter. The component formats nothing.

When to use

A citation marker after the claim it supports, in a response rendered as text.
Several sources for one claim, side by side; the chips wrap like words.

When not to use

A list of sources under the response: use a list of Links.
A tag or a status: use Badge.
A link to another place in the app: use Link. A citation always opens the source in a new tab.

Composition

Static: Badge, size Small, intent Informative.
Linked: Link (external, underline on hover) around that Badge, inside a shrinkable inline box. Link owns the new tab, rel="noopener noreferrer", the external glyph and the visually hidden newTabLabel.
The anchor takes a brightness step on hover and press, as a Button does, because a static Badge paints no state of its own.
A long label truncates inside the chip; the chip never grows past its container.
className goes on the box around a linked chip and on the Badge of a static one. ref goes to the anchor, or to the Badge's span.

Image / Accessibility

Inline Citation / API and Development

On this page

When to use

When not to use

Composition

Inline Citation

Usage

The caller composes the chip text, 1 or 1 · Layout guide, from its own formatter. The component formats nothing.

When to use

A citation marker after the claim it supports, in a response rendered as text.
Several sources for one claim, side by side; the chips wrap like words.

When not to use

A list of sources under the response: use a list of Links.
A tag or a status: use Badge.
A link to another place in the app: use Link. A citation always opens the source in a new tab.

Composition

Static: Badge, size Small, intent Informative.
Linked: Link (external, underline on hover) around that Badge, inside a shrinkable inline box. Link owns the new tab, rel="noopener noreferrer", the external glyph and the visually hidden newTabLabel.
The anchor takes a brightness step on hover and press, as a Button does, because a static Badge paints no state of its own.
A long label truncates inside the chip; the chip never grows past its container.
className goes on the box around a linked chip and on the Badge of a static one. ref goes to the anchor, or to the Badge's span.

Image / Accessibility

Inline Citation / API and Development

On this page

When to use

When not to use

Composition