Navigation
Link
Links allow users to navigate to a new location or to additional information.
Interactive demo
This demo allows you to preview the inline and standalone links, their variations, and configuration options.
Anatomy
The link contains one required element and one optional element.
| Item | Name | Description | Component | Optional |
|---|
Options
The link has options that can be used to provide an appropriate experience for different use cases.
Inline and standalone links
Links can be either inline (within a paragraph or body text) or standalone.
The inline link doesn't have any text cropping applied. It is recommended to crop the whole paragraph, where the inline link appears.
The standalone link has text cropping applied by default.
External link
Navigates the user to an external site. Can be inline or standalone, indicated with a trailing icon.
If the external prop is enabled, it automatically checks if the passed href is external or internal to the website where the link is used. If the href is external, an icon indicating this will be rendered after (trailing) the label.
Inline and standalone links
Links can be either inline (within a paragraph or body text) or standalone.
The inline link doesn't have any text cropping applied. It is recommended to crop the whole paragraph, where the inline link appears.
The standalone link has text cropping applied by default.
External link
Navigates the user to an external site. Can be inline or standalone, indicated with a trailing icon.
If the external prop is enabled, it automatically checks if the passed href is external or internal to the website where the link is used. If the href is external, an icon indicating this will be rendered after (trailing) the label.
States
The link has the following states:
Base
The base style of the link before the user has interacted with it.
Hover
The style of the link changes to let the user know the link is interactive.
Focus
Communicates that the user has highlighted a link, using an input method such as a keyboard or voice.
Active
The link has an active state. The style of the link changes to visually communicate and provide feedback to the user that the link has been interacted with.
Visited
The style of the link changes to let the user know the link has previously been visited.
Visited hover
The style of the link changes to let the user know the link has been previously visited and is currently being hovered.
Usage
Here’s how and when to use the link:
Do use inline links within paragraphs
Use inline links within paragraphs or sentences to link to content on the same page or other pages.
Do use standalone links within navigation components
Use standalone links outside of body content, for example within navigational components such as menus, headers, and footers.
Do use icons for external links
Use a trailing icon to indicate the link takes the user to an external site.
Accessibility considerations
The link has the following accessibility considerations:
Avoid opening links in a new tab or window, as it can be disorienting for users and can cause problems for users who are unable to visually perceive that the new tab has opened.
If there is a need for a link to open in a new tab, include the words 'opens in new tab' within the link text.
| Order | Element | Role |
|---|
| Command | Description |
|---|
By default, there is no aria-label set in the link component. The text inside the anchor will be read by the screen reader, so it is important that links are descriptive. This is so that there is a clear expectation about where the link will take the user. If the text is not descriptive enough, an aria-label will be necessary to understand where the link is taking the user to.
| Element | Attribute | Value | Description | User supplied |
|---|
API
The LinkInline has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
Any prop valid on an anchor HTML element, is also valid on the LinkInline component.
The LinkStandalone has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
Any prop valid on an anchor HTML element, is also valid on the LinkStandalone component.