Link renders a pressable Text element as an anchor (<a>) by default. It inherits parent text styles and supports the same font and color props as Text.
Basics
By default, Link inherits the text styles of its parent. Pass an href to set the destination URL.
<Text font="body" as="p">
Check out the <Link href="https://www.coinbase.com/">Coinbase homepage</Link> for more info.
</Text>
Underline
Use the underline prop to add a text decoration underline to the link. This is particularly important for inline links within body text to meet WCAG 2.0 accessibility requirements.
<Text font="body" as="p">
Read our{' '}
<Link underline href="https://www.coinbase.com/">
terms and conditions
</Link>{' '}
before proceeding.
</Text>
Underline with different fonts
The underline works across all font styles.
<VStack alignItems="flex-start" gap={3}>
<Link underline font="body" href="https://www.coinbase.com/">
body link
</Link>
<Link underline font="label1" href="https://www.coinbase.com/">
label1 link
</Link>
<Link underline font="caption" href="https://www.coinbase.com/">
caption link
</Link>
<Link underline font="legal" href="https://www.coinbase.com/">
legal link
</Link>
<Link underline font="title2" href="https://www.coinbase.com/">
title2 link
</Link>
</VStack>
Underline within a paragraph
When a link appears inline within body text, always use underline so users can distinguish the link from surrounding text without relying on color alone.
<Text as="p" display="block" font="body">
This is a paragraph with an{' '}
<Link underline href="https://www.coinbase.com/">
inline underlined link
</Link>{' '}
that is clearly distinguishable from the surrounding text.
</Text>
Styling
Font
To style a Link, either wrap it in the desired Text component with the appropriate as prop for semantic HTML, or use the font prop directly on the Link.
Wrapping in Text
<VStack alignItems="flex-start" gap={3}>
<Text font="body" as="p">
<Link href="https://www.coinbase.com/" openInNewWindow>
body link
</Link>
</Text>
<Text font="caption" as="span">
<Link href="https://www.coinbase.com/" openInNewWindow>
caption link
</Link>
</Text>
<Text font="label1" as="label">
<Link href="https://www.coinbase.com/" openInNewWindow>
label1 link
</Link>
</Text>
<Text font="label2" as="label">
<Link href="https://www.coinbase.com/" openInNewWindow>
label2 link
</Link>
</Text>
<Text font="legal" as="span">
<Link href="https://www.coinbase.com/" openInNewWindow>
legal link
</Link>
</Text>
<Text font="title1" as="h1">
<Link href="https://www.coinbase.com/" openInNewWindow>
title1 link
</Link>
</Text>
<Text font="title2" as="h2">
<Link href="https://www.coinbase.com/" openInNewWindow>
title2 link
</Link>
</Text>
<Text font="title3" as="h3">
<Link href="https://www.coinbase.com/" openInNewWindow>
title3 link
</Link>
</Text>
</VStack>
Using the font prop
If you need to style a link without wrapping it in a semantically appropriate text element, use the font prop directly.
<VStack alignItems="flex-start" gap={3}>
{['body', 'caption', 'label1', 'label2', 'legal', 'title1', 'title2', 'title3'].map((font) => (
<Link font={font} href="https://www.coinbase.com/" openInNewWindow>
{`${font} link`}
</Link>
))}
</VStack>
Color
Override the default link color using the color prop with any CDS foreground token.
<VStack alignItems="flex-start" gap={3}>
<Link href="https://www.coinbase.com/" color="fgPrimary">
fgPrimary (default)
</Link>
<Link href="https://www.coinbase.com/" color="fgNegative">
fgNegative
</Link>
<Link underline href="https://www.coinbase.com/" color="fgNegative">
fgNegative with underline
</Link>
</VStack>
Navigation
openInNewWindow
Set openInNewWindow to open the link in a new browser tab.
<Link font="body" href="https://www.coinbase.com/" openInNewWindow>
Opens in a new tab
</Link>
rel
Use the rel prop to set the relationship between the current document and the linked resource.
<VStack alignItems="flex-start" gap={3}>
<Link font="body" href="https://www.coinbase.com/" rel="noreferrer">
rel=noreferrer
</Link>
<Link font="body" href="https://www.coinbase.com/" rel="noopener">
rel=noopener
</Link>
</VStack>
Accessibility
Accessibility tipWCAG 2.0 has 2 requirements for body text links that are not underlined by default:
The link text must have a 3:1 contrast ratio from the surrounding non-link text. The link must present a "non-color designator" (typically the introduction of the underline) on both mouse hover and keyboard focus. These two requirements help ensure that all users can differentiate links from non-link text, even if they have low vision, color deficiency, or have overridden page colors.
Use the underline prop on inline links within body text to ensure they are distinguishable without relying on color alone.
<Text as="p" font="body">
By continuing, you agree to the{' '}
<Link underline href="https://www.coinbase.com/">
Terms of Service
</Link>{' '}
and{' '}
<Link underline href="https://www.coinbase.com/">
Privacy Policy
</Link>
.
</Text>