React Link component

Preview

<Link href="#">Learn more about our services</Link>

Usage

Use when

Inline links inside body text
Footer and sidebar navigation
"Forgot password?" and "Sign up" in forms
Pointing out to docs or external resources

Avoid when

A main call to action — use Button
Switching views in place — use Tabs
Dropdown items — use Menu

Implementation notes

Name the destination; never "click here"
external sets target and rel; add your own "opens in a new tab" cue
Always underlined: one hairline at the shared offset, so a link never relies on colour alone
tone="neutral" for quiet links in dense copy and footers
render={<RouterLink />} for client-side navigation

Installation

pnpm add @usefragments/ui

Import styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.

Examples

Tones

The link ink, then the neutral ink.

import { Stack } from '@usefragments/ui';

<Stack direction="row" gap="md" align="center" wrap>
  <Link href="#" tone="accent">Accent</Link>
  <Link href="#" tone="neutral">Neutral</Link>
</Stack>

External Link

Sets target and rel; you still supply the visible cue.

<Link href="https://example.com" external>
  View documentation ↗
</Link>

Render

Moves the look onto a router link.

import RouterLink from "next/link";

<Link render={<RouterLink href="/pricing" />}>Client-side navigation</Link>

API reference

Component props
Prop	Type	Default	Description
`children`Required	`React.ReactNode`	Not set	Link text content
`external`	`boolean \| undefined`	`false`	Opens in new tab with noopener noreferrer
`render`	`useRender.RenderProp<Record<string, unknown>> \| undefined`	Not set	Replaces the rendered element (a router link); the look and props move onto it
`tone`	`LinkTone \| undefinedneutralaccent`	`accent`	Colour. accent is the link ink; neutral reads in ink 1 and keeps it on hover
`className`	`string \| undefined`	Not set	Additional class name
`style`	`CSSProperties \| undefined`	Not set	Inline styles
`target`	`HTMLAttributeAnchorTarget \| undefined`	Not set	—
`rel`	`string \| undefined`	Not set	—

Accessibility

The link text alone should make sense out of context
Say when a link opens a new window
Focus ring must stay visible
A link that looks like a button still needs link semantics

ButtonalternativeUse Button for primary actions, Link for navigation
TextparentLinks often appear within Text components

Next steps

Accessibility guidanceThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.