Link – Code – AI Kit

Implementation
Link Props

Common Examples

To use the Link, import it from @servicetitan/anvil2-ai-kit and pass a required text prop. The kit forbids children; all content flows through typed props.

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

function ExampleComponent() {
  return <Link href="/dashboard" text="Go to dashboard" />;
}

Without an href, React Aria renders a <span role="link">. For client-side routing, configure a React Aria RouterProvider at the app root so href is router-aware.

New tab

Set target="_blank" to open in a new tab. Link 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

Link renders inline, so it wraps with surrounding copy. Nest it in Text through the text prop.

Wrapping

Long labels wrap like any other inline text.

Internationalization

Link uses the ai-kit.link.opensInNewTab message for the new-tab announcement. English is the default. Mount AiKitIntlProvider inside CartoTheme to switch locale or override that string without colliding with your app’s react-intl context.

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

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

React Accessibility

Every Link requires text, which is the visible label and accessible name.
target="_blank" adds an “(opens in a new tab)” announcement and a presentational trailing icon.
Users activate a focused link with Enter.

<Link href="/dashboard" text="Go to dashboard" />

`Link` Props

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

string

required

Required link text. This is the visible, clickable content and the accessible name.

string

Caller-supplied class name merged onto the link’s recipe class.

string

Destination URL. Without an href, React Aria renders a <span role="link">.

string

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

string

Anchor target. "_blank" appends the open-in-new icon, applies a safe rel default, and adds the screen-reader announcement.

​Common Examples

​New tab

​Inline in text

​Wrapping

​Internationalization

​React Accessibility

​Link Props

Common Examples

New tab

Inline in text

Wrapping

Internationalization

React Accessibility

`Link` Props