Link

A styled <a> for navigation — inline in text or standalone in lists and footers. Use a Button when the result is an action rather than a new location.

StableSource

Read the installation guide before you start.

<Text>
Read the <Link href="/docs/installation">installation guide</Link> before you start.
</Text>

Import

tsx

import { Link } from "@merid/react";

Examples

Tones

accent (default) is for links inside running text. ink and muted are quieter, for navigation lists and footers where every item is a link.

Accent Ink Muted

<Link href="#" tone="accent">Accent</Link>
<Link href="#" tone="ink">Ink</Link>
<Link href="#" tone="muted">Muted</Link>

Underline

hover (default) shows the underline on hover and focus. Use always when the link must be distinguishable without colour — for example inside a paragraph of muted text.

Underline on hover Always underlined No underline

<Link href="#" underline="hover">Underline on hover</Link>
<Link href="#" underline="always">Always underlined</Link>
<Link href="#" underline="none">No underline</Link>

External

external opens the link in a new tab, sets rel="noopener noreferrer", and appends a visually hidden “(opens in a new tab)” so screen reader users are warned.

GitHub repository

<Link href="https://github.com/ahmetcantryk/merid" external>
GitHub repository
</Link>

With a client-side router

Pass asChild and your router's link as the only child: it gets Merid's link styling and keeps its own behaviour. This also works from server components.

tsx

import NextLink from "next/link";

<Link asChild tone="accent">
  <NextLink href="/pricing">Pricing</NextLink>
</Link>

API reference

Forwards its ref to the <a> and passes all native anchor attributes through. When external is set, it overrides target and rel.

Prop	Type	Default	Description
`tone`	`"accent" \| "ink" \| "muted"`	`"accent"`	Text colour.
`underline`	`"hover" \| "always" \| "none"`	`"hover"`	When the underline shows.
`external`	`boolean`	`false`	Opens in a new tab with rel="noopener noreferrer" and appends a visually hidden hint.
`href`	`string`	–	Native link target.
`asChild`	`boolean`	`false`	Render the single child element (e.g. a router link) with link styling instead of an `<a>`.

Styling

Hook	Values
`.mrd-link`	Root `<a>`
`data-tone`	`accent` · `ink` · `muted`
`data-underline`	`hover` · `always` · `none`

Link has no component variables; it reads --mrd-accent, --mrd-accent-hover, --mrd-ink and --mrd-muted.

Accessibility

Renders a native <a>: Enter follows it, and it appears in the screen reader's links list.
Link text must make sense out of context — “Read the pricing guide”, not “click here”.
external adds the new-tab warning; do not open new tabs silently with target="_blank" alone.

Key	Action
`Tab`	Moves focus to the link.
`Enter`	Follows the link.

Guidelines

Use Link when something takes the user somewhere; use Button when it does something.

Avoid

Attach an onClick to a link with href="#" to trigger an action.

Underline links that sit in muted or dense text so they are not identified by colour alone.

Avoid

Use underline="none" for links in running text.

Button — the link variant looks like a link but performs an action.
VisuallyHidden — the utility behind the external-link hint.