Link

Variants and external

Inline link Standalone link Subtle link Rook website

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>

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

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.

Button: Actions, or a link that must look like a button (asChild).
BackLink: Navigation one level up.

Dependencies

Kind	Depends on
npm packages	`@radix-ui/react-slotreact`
Monarch components	VisuallyHidden

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