Source: https://monarchui.dev/components/link/

Components · Navigation

# Link

Text link with inline, standalone and subtle styles and safe new-tab handling.

@rookcom/monarch-react

Component

## Variants and external

## Usage examples

The example at the top of the page is the only one for this component.

## Purpose

Navigates to another page or resource from text, lists and footers.

### Use when

- Navigation inside running text (`inline`).
- Links in lists, cards and footers (`standalone`, `subtle`).

### Avoid when

- The control performs an action on the page: use Button.

## Design principles

- `inline` (default) for links in text, `standalone` for links in lists and footers.
- Links that open a new tab say so, visually and to screen readers.

## API reference

```tsx
import { Link } from '@rookcom/monarch-react';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `Link` | component | server-safe | `.mn-link` |

Forwards its ref to the `<a>` (or the child element with `asChild`).

All native anchor attributes pass through.

Generated from the TypeScript declarations of `packages/react/src/components/navigation/link`.

## Properties

### `Link`

Text link. When `target="_blank"` it adds `rel="noopener noreferrer"`, an external icon and a hidden "opens in a new tab" note.

| Prop | Type | Description |
| --- | --- | --- |
| `asChild` | `boolean` | Render the child element (e.g. a Next.js Link) with link styling. |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `id` | `string` |  |
| `variant` | `"subtle" \| "inline" \| "standalone"` | `inline` (default) for links in text, `standalone` for links in lists and footers. |

## Variants

| Prop | Values | Description |
| --- | --- | --- |
| `variant` | `'inline'``'standalone'``'subtle'` | Default `inline`. Exposed as `data-variant`. |

## States

| State | Exposed as | Behaviour |
| --- | --- | --- |
| Hover | – | Each variant has its own hover style in link.css. |
| Focus | – | Monarch focus ring on `:focus-visible`. |
| External | `target="_blank"` | Adds `rel="noopener noreferrer"` (merged with any `rel` passed), an external icon and a visually hidden "(opens in a new tab)". |

## Interaction behaviour

- Native link behaviour.
- With `asChild`, the child element (for example a router link) receives the classes and attributes.

## Keyboard support

| Keys | Action |
| --- | --- |
| Tab | Moves focus to the link. |
| Enter | Follows the link. |

## Accessibility

Role

link

Accessible name

The link text; external links append "(opens in a new tab)".

- The external icon is `aria-hidden` and not focusable.

## Responsive behaviour

This section is incomplete

No width-specific behaviour is defined or tested.

## Theme support

- Colours are Monarch semantic tokens only, so light, dark and more-contrast themes apply automatically.

## Do and don't

### Do

- Use `asChild` to style a router link.
- Write link text that makes sense out of context.

### Don't

- Do not use a Link for actions such as "Delete"; use Button.

## Related components

- [Button](https://monarchui.dev/components/button/): Actions, or a link that must look like a button (`asChild`).
- [BackLink](https://monarchui.dev/components/back-link/): Navigation one level up.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | `@radix-ui/react-slot``react` |
| Monarch components | [VisuallyHidden](https://monarchui.dev/components/visually-hidden/) |

## Testing coverage

- External links get rel="noopener noreferrer" and a hidden new-tab note in their name.
- No axe violations in jsdom.
- Renders on the server.

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | None yet |

Tests: `packages/react/src/components/navigation/link`

## All example code

### Variants and external

```tsx
import { Link } from '@rookcom/monarch-react';

<Link href="#/components/link">Inline link</Link>
<Link href="#/components/link" variant="standalone">
  Standalone link
</Link>
<Link href="#/components/link" variant="subtle">
  Subtle link
</Link>
<Link href="https://rookhq.com" target="_blank">
  Rook website
</Link>
```