Link

Installation

npm install @nib-components/link

Note: You will also need to install the peerDependencies @nib/icons and @nib-components/theme.

Usage

import Link from '@nib-components/link';

Interactive demo

<Link href="#">Hello World!</Link>

Props

Using icons

The simplest way to use icons with the link is with the icon and iconPlacement props:

<Link href="#" icon={ChevronLeftSystemIcon} iconPlacement="left">
  Link text
</Link>

If you need to customise the icon and have more control over the component, you can provide an icon as an inline function:

<Link href="#" icon={() => <ChevronLeftSystemIcon size="xs" />} iconPlacement="left">
  Link text
</Link>

Icon placement

The recommended icon placement depends on the link context. If using a horizontal chevron (ChevronLeftSystemIcon or ChevronRightSystemIcon), the icon should be on the side of the text that the chevron is pointing to. For all other icons, they should be placed on the right of the text.

Accessibility requirements

Color

Our link component for the nib brand is True Green by default to differentiate it from surrounding non-link text. Where possible you should always use a different color to the surrounding text for a link. Preference should always be given to having green links so that users can more easily recognise clickable elements across our site. Similarly, True Green should be reserved for links (over standard text) to avoid users confusing other copy for a link.

By default our link meets the minimum contrast ratio for web accessibility when used over either a white or light grey background. Be sure to check the contrast if you are using a different background.

Do not rely on color alone to differentiate links - always use an underline as well.

Underline

Our link component is underlined by default to provide an alternative visual cue (other than color) for users who may be color blind. On hover the underline increases from 1px to 2px. To avoid confusion for all users do not underline text unless it is a link.

Labelling

You should always use meaningful labelling of links (e.g. "Hospital cover") rather than abstract link text (e.g. "click here"). This helps users who want to tab from link to link, and assists users with screen readers in understanding the page without having to open each link to see where it leads. Link labels should be consistent with where the user will be taken, and should avoid long phrases or sentences as sentence order can change during language translations.

Duplicate labelling

Link text should be the same if you have multiple links on the same page that lead to the same location. This avoids confusions for all users alike, and assists in understanding for those using assistive technology.

Opening in a new tab

Links should open in the same window in the majority of cases. If your link does need to open in a new tab, do so by adding target="_blank" to the link. This will automatically add hidden screen-reader only text and the ExternalLink icon to indicate that the link will open a new tab/window. This ExternalLink icon will override the icon prop if iconPlacement="right". If you wish to hide this icon for whatever reason, there is a hideNewTabIcon boolean prop.

Document downloads

If your link is to download a document, be sure to include the file type and size in the link text. This assists both general users and those with disabilities, and additionally prevents issues for those on devices which don't support the file type downloaded. For example: Terms and conditions (PDF, 23kb)

Component

Our link component uses an <a> tag by default, but can be changed via the component prop. For example, within a single page application you may need to use a react-router link instead.

import Link from '@nib-components/link';
import {Link as ReactRouterLink} from 'react-router';

<Link component={ReactRouterLink}>Hello World!</Link>;