Skip to content
Stable

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

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

Usage

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

Interactive demo

jsx

Props

PropTypeDefaultDescription
colorstringloudThe link color. Must be one of [loud, dark, light, destructive].
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.
iconcomponentAdd an icon next to the link text. Must be a valid icon defined in @nib/icons.
iconPlacementstringrightThe placement of the icon next to the link text. Must be one of ['left', 'right'].

Using icons

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

jsx
<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:

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

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>;