How to build an accessible Link in React
Renders a native <a> so role, Enter activation, and focus come from the platform; external links add rel="noreferrer" and a visual indicator so users know a new tab will open
When to use a Link
- Navigating to another page, view, or resource via a real href
- Inline cross-references within prose (variant="inline")
- Linking to an external destination with a clear new-tab indicator (external)
When not to use it
- Triggering an action or mutation with no destination — use Button
- Submitting a form — use a submit Button
Keyboard interactions
Role link, verified at WCAG 2.2-AA.
Enter
Common mistakes
Avoid: <Link onClick={doThing}> with no href
Prefer: <Button onClick={doThing}>
Links are for navigation; actions belong to buttons so keyboard and assistive tech behave correctly
Example
<Link href="/docs">View documentation</Link>