Default
Default Link text will inherit parent text styles.
Styling your link
To style a <Link />
component, simply wrap the Link
node in the desired Text
component, using the as
prop for your usecase (for example, p
for body text, h1
/h2
/h3
for titles, etc). However, there may be times when a rendering a span is exactly what you want. In those cases, providing a font prop makes sense.
Wrapping your Link in the appropriate Text element
Using the font prop
If you find yourself in a situation where you simply need to style a link as a Text component without wrapping it in the semantically appropriate text element, reach for the font
prop.
Color override
openInNewWindow and rel props
Handling onClick
Accessibility
WCAG 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.