Link

Status: Stable

Latest released: 2019

Current version: v1.11.4

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

Development

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

Props