Skip to content
Mesh
5.2.2

Link

The Link component is used to highlight that further content is available. It can also be used to emphasise other important details like emails and phone numbers.

Installation

bash
npm install @nib-components/link

Usage

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

Interactive demo

jsx

Props

PropTypeDefaultDescription
colorstringloudThe link color. Must be one of [loud, dark, light].
componentstringaThe link component.
hrefbooleanThe link href url. Required if component="a".
underlinebooleantrueShow or hide the underline for the link. Links should prefer underlines for improved accessibility.

Accessibility requirements

Color

Our link component is 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 - black or white can be used where necessary. Preference should always be given to having green links so that users can more easily recognise clickable elements across our site. Similarly, green should be reserved for links (over standard text) to avoid users confusing other green 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. Where possible you should always use a different color to the surrounding text for a link.

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.

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.

jsx
import Link from '@nib-components/link';
import {Link as ReactRouterLink} from 'react-router';
<Link component={ReactRouterLink}>Hello World!</Link>;