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.