Link

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 Text, Text Small, or Text X-Small 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.

<Link href="#">Text link</Link>

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".

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.

• Button