Citation – 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.

AI Kit

Agent Experience

Citation – Code

Common Examples

New tab

Inline in text

Internationalization

React Accessibility

`Citation` Props

​Common Examples

​New tab

​Inline in text

​Internationalization

​React Accessibility

​Citation Props

Common Examples

New tab

Inline in text

Internationalization

React Accessibility

`Citation` Props