Skip to content

Link

Status: Stable

Latest released: 2019

Current version: v1.12.5

Storybook
GitHub

Links indicate to a user that text is actionable (e.g., proceed to a new page, reveal more information via modal or accordion). Only one level of hierarchy is available for links at this time.

Best practices:

  • All actionable text must use the default blue link style.
  • Do not use other colors for links (gray, red, etc.).
  • Do not use decorated links (underline); underline is only used to communicate hover.
  • Do not apply styling to links (bold, italic, uppercase, etc).
  • Only apply links to Body, Body Small, or Legal type styles.
  • All links should be Gotham; do not use Chronicle.
  • Be careful when stacking links, ensure each link allows a minimum target area of 44px.

Variants

Default


Accessibility

Users may quickly tab through a page to discover interactive elements, or use the VoiceOver rotor to get a list of all links on the page. This means it's important that the link's text is descriptive of what the link actually does, since it's not guaranteed that the user will encounter your link in the context of adjacent labels or descriptions. Instead of links like "Read more" or "Apply now", you should prefer more descriptive ones like "Read more about robo-advisors" or "Apply now on Chase's site".


Development

import Link from '@nerdwallet/react-link';
<Link />;

You often want a link that looks like a button, or vice-versa a button that looks like a link. The <Link> and <Button> components can be used interchangeably, and which one you use should be determined by what you want it to look like. Both components can render either <a> or <button> tags depending on the props used (href vs onClick), ensuring you get both the right styling and the right dom elements for semantics and accessibility.

  • Use this component (<Link>) when you want something that looks like a link.
  • Use <Button> when you want something that looks like a button.

Props

<Link>

bold

boolean

Applies bold styling.


children

node

Children string or components to render between <span>, or in place of <span>.


className

string


component

any

Allows you to provide a React component or other HTML element, overriding the default `a` and `button` options.


disabled

boolean

Whether or not to apply disabled styles. Note that this should only be used when this component is rendering a `button`.


gotham

boolean


href

string

The URL to visit.


size

0 | 1 | 2 | 3 | 4 | 5 | ...Object.keys(linkLevelSizeMap)

Size of the link. Supports semantic "small" and "legal" or a numeric scale from size 0 to 5.


dangerouslyForceHoverStyling

boolean

Force the component to use its hover styles.


dangerouslyForceFocusStyling

boolean

Force the component to use its focus styles.


dangerouslyForceActiveStyling

boolean

Force the component to use its click or active styles.