Citation - Web

For development, import Citation from @servicetitan/anvil2-ai-kit. For design, find it in the AI Kit Web Component Library file.

Options

The Citation supports opening its destination in a new tab and can be placed on its own or inline within body text.

Open in New

Pass target="_blank" to open the citation in a new tab. That also renders a trailing external-link icon labeled “opens in a new tab” and sets rel="noopener noreferrer" unless you supply a rel. Omit target for on-page citations that scroll to a same-page sources list — the icon is omitted in that case.

Inline

Citations sit inline within body text, immediately after the claim they support.

Behavior

The Citation responds to hover and keyboard focus like any other link.

Visual States

Hover shifts the pill to the informative (blue) intent. Keyboard focus draws a ring around the whole pill.

Usage Guidelines

When to Use

Use the Citation when:

Attributing agent content to a source – A claim in an agent response needs a visible source.
Citing inline – Place the Citation immediately after the claim it supports.
Linking to an external source – The original source opens in a new tab.
Pointing to a sources list on the same page – The Citation scrolls to a sources list and stays in the current tab.

When not to use

Avoid using the Citation for:

Navigating to a page or location that isn’t a source – Use the Link instead.
Triggering an action – Use the Button instead.

Keyboard Interaction

Users can navigate and activate the Citation using standard keyboard controls.

Key	Description
Tab	Moves focus to the citation
Enter	Activates the focused citation’s `href`

Code

Implementation
Citation Props

Common Examples

To use the Citation, import it from @servicetitan/anvil2-ai-kit and pass the required href and text props. Use an on-page anchor for a source list or an external URL for the original source.

import { Citation } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return <Citation href="#sources" text="Source 1" />;
}

New tab

Set target="_blank" for an external source. Citation appends an open-in-new icon, defaults rel to "noopener noreferrer" unless you pass rel, and announces “(opens in a new tab)” to assistive technology.

Inline in text

Citation renders inline and does not split across lines, so it can identify a source without interrupting the surrounding copy.

Internationalization

Citation uses the ai-kit.citation.opensInNewTab message for the new-tab announcement. English is the default. Mount AiKitIntlProvider inside CartoTheme to switch locale or override the string.

import {
  AiKitIntlProvider,
  CartoTheme,
  Citation,
} from "@servicetitan/anvil2-ai-kit";

function Root() {
  return (
    <CartoTheme>
      <AiKitIntlProvider
        locale="fr-FR"
        messages={{
          "ai-kit.citation.opensInNewTab":
            "(s'ouvre dans un nouvel onglet)",
        }}
      >
        <Citation
          href="https://example.com/report"
          target="_blank"
          text="Source"
        />
      </AiKitIntlProvider>
    </CartoTheme>
  );
}

React Accessibility

text is the visible link text and accessible name.
target="_blank" adds a localized new-tab announcement and a trailing icon.
Users activate a focused citation with Enter.

<Citation href="#sources" text="Source 1" />

`Citation` Props

The Citation accepts the following props. It also forwards remaining React Aria Link props except children, className, style, and href.

string

required

Destination. Use an on-page anchor or an external URL.

string

required

Visible link text and accessible name.

string

Class merged onto the citation recipe class.

string

Link relationship. When target="_blank" and rel is omitted or whitespace-only, Citation sets "noopener noreferrer".

string

Anchor target. "_blank" adds the external-link treatment and localized announcement.

Concepts & Guidelines

Anvil2

Resources

Citation - Web

Options

Open in New

Inline

Behavior

Visual States

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

New tab

Inline in text

Internationalization

React Accessibility

`Citation` Props

​Options

​Open in New

​Inline

​Behavior

​Visual States

​Usage Guidelines

​When to Use

​When not to use

​Keyboard Interaction

​Code

​Common Examples

​New tab

​Inline in text

​Internationalization

​React Accessibility

​Citation Props

Options

Open in New

Inline

Behavior

Visual States

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

New tab

Inline in text

Internationalization

React Accessibility

`Citation` Props