# Link

Navigates to another page or location. For actions that don't navigate, use [Button](/components/button.md); for a link that looks like a button, use [ButtonLink](/components/button.md#links).

Links use `semantic.typography.primary` like [Text](/components/text.md), so they match the text around them in UI and in long-form content (`data-text-context="prose"`).

```tsx
// demo.tsx
import {Link, Text} from '@earendil-works/elanor-react';

export default function LinkDemo() {
  return (
    <Text>
      Read the <Link href="#">onboarding guide</Link> before your first project.
    </Text>
  );
}
```

## Usage

```tsx
import {Link} from '@earendil-works/elanor-react';

<Link href="/guides/onboarding">Onboarding guide</Link>;
```

Write link text that makes sense out of context; avoid "click here".

## New tab

Open a new tab only when leaving would interrupt a task. Say so in the link text and set `rel="noreferrer"`.

```tsx
// external.tsx
import {Link} from '@earendil-works/elanor-react';

export default function LinkExternal() {
  return (
    <Link href="https://example.com/status" target="_blank" rel="noreferrer">
      Service status (opens in a new tab)
    </Link>
  );
}
```

## API

### `Link`

Renders `<a>`. Accepts its HTML attributes and `ref`.