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.
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
- 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
All components are responsive and meet WCAG 2.1 AA accessibility guidelines.