Skip to main content
Link
@coinbase/cds-web@8.34.1
A pressable Text component.
Import
import { Link } from '@coinbase/cds-web/typography/Link'
SourceView source codeStorybookView StorybookFigmaView Figma (internal only)
Related components
View as Markdown

Default

Default Link text will inherit parent text styles.

Loading...

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

Loading...

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.

Loading...

Color override

Loading...

openInNewWindow and rel props

Loading...

Handling onClick

Loading...

Accessibility

Accessibility tip

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.

Is this page useful?

Coinbase Design is an open-source, adaptable system of guidelines, components, and tools that aid the best practices of user interface design for crypto products.