---
title: "Link"
description: "Text that navigates: inside a sentence or on its own. Internal links go through the app router; links that open a new tab protect their opener. Use ButtonLink when navigation should look like an action."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Link

## Inside a sentence

```tsx
import { Link } from '@arbol-ai/ui';

<p className="text-sm">
  No campaigns are running. <Link href="#/link">Create a campaign</Link> to start calling your
  contacts.
</p>
```

## Muted

For secondary navigation that should not draw the eye.

```tsx
import { Link } from '@arbol-ai/ui';

<div className="flex items-center justify-between gap-4 text-sm">
  <span className="font-medium">Recent appointments</span>
  <Link href="#/link" variant="muted">
    View all
  </Link>
</div>
```

## Plain

No color, weight or underline of its own, for a link styled by its classes or its content, such as a name in a table.

```tsx
import { Link } from '@arbol-ai/ui';

<div className="rounded-card flex max-w-md items-center justify-between border px-4 py-2 text-sm">
  <Link className="data-hovered:text-brand-accent truncate font-medium" href="#/link" variant="plain">
    Front desk agent
  </Link>
  <span className="text-muted-foreground">12 calls today</span>
</div>
```

## Opens a new tab

target="_blank" adds rel="noopener noreferrer" unless the link sets its own rel.

```tsx
import { Link } from '@arbol-ai/ui';

<Link className="text-sm" href="https://react-aria.adobe.com/Link" target="_blank">
  The React Aria Link documentation
</Link>
```

## Source

The examples above are [`src/components/link/link.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/link/link.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/navigation/link/index.mdx