Link - Web (AI Kit)

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

Options

The Link supports same-page or new-tab navigation and reads naturally either on its own or inline within body text.

Target

Omitting target navigates within the app. Set target="_blank" to open in a new tab — Link appends a trailing icon, defaults rel to noopener noreferrer, and adds an “(opens in a new tab)” announcement for screen readers.

Inline

Link renders inline by default, so it flows naturally inside body copy built with Text or Markdown.

Behavior

The Link responds to hover and keyboard focus, and wraps like any other inline text.

Visual States

Hover shifts the link to the informative (blue) color while the underline stays as the resting affordance. Keyboard focus draws a ring around the whole link and removes the underline, since the ring itself becomes the focus affordance.

Wrapping

Long link text wraps naturally within its container, the same as any other inline text.

Usage Guidelines

When to Use

Use the Link when:

Navigating within the app – The destination is another page or location in the product.
Opening a destination in a new tab – The Link adds a trailing icon and tells screen reader users that it opens in a new tab.
Linking from body copy – The link sits inline within a sentence of Text or Markdown.

When not to use

Avoid using the Link for:

Triggering an action – Use the Button instead.
Attributing agent content to a source – Use the Citation instead.

Keyboard Interaction

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

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

Code

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.

Concepts & Guidelines

Anvil2

Resources

Link - Web (AI Kit)

Options

Target

Inline

Behavior

Visual States

Wrapping

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

New tab

Inline in text

Wrapping

Internationalization

React Accessibility

`Link` Props

​Options

​Target

​Inline

​Behavior

​Visual States

​Wrapping

​Usage Guidelines

​When to Use

​When not to use

​Keyboard Interaction

​Code

​Common Examples

​New tab

​Inline in text

​Wrapping

​Internationalization

​React Accessibility

​Link Props

Options

Target

Inline

Behavior

Visual States

Wrapping

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

New tab

Inline in text

Wrapping

Internationalization

React Accessibility

`Link` Props