Components / Media

Link

Link is the inline anchor. It renders an <a>, takes its colour from the theme's accent, ships a visible focus ring, and auto-injects a safe rel when the link opens in a new tab.

Loading playground…

What it is

A Pressable rendered as <a>. Link inherits Pressable's pseudo-state plumbing — _hover, _focus, and the rest all work — and layers anchor-specific behaviour on top: the href, the target, an underline mode, and the rel safety default.

When target="_blank" is set, Link defaults rel to noopener noreferrer. The new tab cannot reach back into the opener's window, and the referrer is withheld. Pass an explicit rel to override.

Install

Link is exported from usemotif. No separate install.

example.tsx

import { Link } from 'usemotif';

API

Link

stable

function Link(props: LinkProps): JSX.Element

hrefstringrequired

The URL the link points at. Becomes the anchor `href`.

target"_blank" | "_self" | "_parent" | "_top"

Standard anchor target. `_blank` opens a new tab and triggers the safe `rel` default.

relstring

Anchor `rel`. Defaults to `noopener noreferrer` when `target="_blank"`; pass a value to override.

underline"hover" | "always" | "never"= "hover"

Underline mode. `hover` underlines on hover and focus; `always` underlines unconditionally; `never` never underlines — use sparingly.

…PressablePropsOmit<PressableProps, "as" | "children">

Every Pressable prop except `as` and `children`. Pseudo-state props (`_hover`, `_focus`) and style props pass through.

Accessibility

Link's defaults follow the accessible path. The colour comes from the theme accent, so links are distinguishable from body text. The focus ring is visible — keyboard users can see where they are. underline="hover" keeps an underline available on focus as well as hover.

underline="never" removes the only non-colour signal that the text is a link. Reach for it only when another affordance makes the link unmistakable; on its own, colour is not enough for users who cannot distinguish it.

For new-tab links, the rel safety default is automatic — but signal the new tab to the user too, with link text or an adjacent icon, so the context switch is not a surprise.

Examples

A basic inline link:

example.tsx

<Paragraph>
Read the <Link href="/docs">documentation</Link> to get started.
</Paragraph>

A new-tab link — rel is set automatically:

example.tsx

<Link href="https://example.com" target="_blank">
External site
</Link>

An always-underlined link with a hover colour:

example.tsx

<Link
href="/pricing"
underline="always"
_hover={{ color: '$colors.action.primary.bgHover' }}
>
See pricing
</Link>