Usage
Link text should be clear and meaningful.
Use links to:
- navigate between different pages and sections
- navigate to an external website
- jump to an element on the same page
- link to information such as emails or phone numbers
Links vs. buttons
While buttons and links are similar, they differ in usage and behaviour.
- Links are used to navigate, directing users to different pages or sections. They are suited for textual content that requires a link to additional information or related resources.
- Buttons are better suited as interactive elements that trigger actions or perform a specific task when clicked or activated, such as submitting a form, initiating downloads, opening modals or dialog boxes or initiating user interactions within the interface.
Link icons
Using icons that convey meaning can enhance the user experience.
Commonly icons used with links:
- External link icon: to navigate to a different website or web page outside the current domain.
- Download icon: to view or download a document, such as a PDF or Word file.
- Phone icon: to call or contact a phone number.
- Email icon: to open the default email client to compose a new message.
- Calendar icon: to link to a calendar, scheduling functionality or an .ical file.
When to avoid
Do not:
- overload content with excessive links, instead use only when necessary
- use generic terms like 'click here', 'see', 'more' or 'more information'
- use a URL for link text. Use link text that clearly identifies the target of the link
- make the link text too long. Only link the main words
- use the same link text for different URLs on the same page
- use end punctuation. If your link is at the very end of a sentence, make sure that the full stop is not part of the linked text
Accessibility
All components are responsive and meet WCAG 2.1 AA accessibility guidelines.