Link
Standalone text link for inline navigation inside prose. Aligned with J&J DS v1.2 (Figma 12682:45861). Brand-blue by default, underlined; supports end-icons for external destinations and subtle / inverse tones for different surfaces. For link-styled buttons use <Button variant="link"> instead.
Default tone
Brand-blue with a persistent underline. Visited state fades to neutral warm-gray.
Show sourceHide source
<Link href="/docs">Read the docs</Link>
<Link href="https://www.jnj.com" target="_blank">J&J corporate</Link>
<Link href="#" endIcon="arrow">Learn more</Link>Sizes
Small / medium (default) / large. Match the surrounding body type for inline links.
Show sourceHide source
<Link size="sm">Small link</Link>
<Link size="md">Medium link (default)</Link>
<Link size="lg">Large link</Link>Subtle tone (tone="subtle")
Matches surrounding body color; underlines only on hover. Use when the link is embedded in text and too much blue would be noisy.
The study enrolled 128 patients across 3 sites. See the full report for enrollment, adverse events, and outcome data.
Show sourceHide source
<p>
The study enrolled 128 patients across 3 sites. See the <Link tone="subtle" href="#">full report</Link>.
</p>Inverse tone (tone="inverse")
White link for use on dark surfaces (background-inverse / background-03).
Show sourceHide source
<div className="bg-jj-bg-inverse p-4">
<Link tone="inverse" href="#">View session recording</Link>
</div>External link auto-detection
When href starts with http(s):// or target='_blank' is set, the external icon is auto-added and rel='noopener noreferrer' is applied. Set endIcon='none' to suppress the icon.
Show sourceHide source
<Link href="https://www.jnj.com" target="_blank">External (auto icon)</Link>
<Link href="https://www.jnj.com" target="_blank" endIcon="none">External (no icon)</Link>Disabled
Rendered without href/target, with aria-disabled. Use sparingly — disabled links are unusual; consider hiding them instead.
Show sourceHide source
<Link href="/locked" disabled>Disabled link</Link>