Link

Links are used as navigational elements This component is styled to resemble a hyperlink and semantically renders an <a>.

Use the link component when you want to navigate to a different page within the platform, navigate to an entirely different site, jump to an element on the same page, or link to a email address.

Links should not be used to submit data or take an action. If you need a component that doesn't have a URL associated with it, use the button component.

Import

import { Link } from '@outfitio/outkit';

Usage

External Link

Used for text links that should open in a new browser tab. Only use this an external when opening a page in the same tab would disrupt the user's workflow - for example, navigating to a Help Centre article.

Link inline with text

Usage with Routing Library

To use the Link with a routing Library like Reach Router or React Router, all you need to do is to pass the as prop. It'll replace the rendered a tag with with Reach's Link.

// 1. import { Link as ReachLink } from "@reach/router"

// 2. Then use it like this
<Link as={ReachLink} to="/home">
  Home
</Link>

Accessibility

• Always add a link destination using the href prop to ensure that the element is identified as a link by assistive technologies and given default keyboard support.
• Link text should clearly and consistently define its purpose, as defined in the best practice guidelines.
• Links use browser defaults for keyboard interaction. Give links keyboard focus with the tab key (or shift + tab when tabbing backwards). Activate links with the enter / return key.

Best Practice

• Links should use meaningful labels that accurately reflect the content users will find at the link destination. Never use vague labels like “click here” or "here"
• Links in full sentences shouldn't link the entire sentence, only the text that describes where the user will go when they select the link.
• Stand-alone links should use a {verb + noun} pattern and not be punctuated, with the exception of question marks.

Props

The link component composes the PseudoBox component.