Link

Links are elements that allow you to navigate between different webpages or different sections within the same webpage.

Demo & code

Maecenas at risus ullamcorper odio facilisis ultrices et et metus.

Show code Hide code

Usage

Guidance

use links to navigate between pages, sections or external websites
use links to jump to content on the same page
use links for contact information such as email addresses or phone numbers
write clear, meaningful link text that identifies its destination
keep link text concise and link only the words that describe the destination
consider using icons that convey meaning to enhance the user experience

Don't

use a link to perform an action; use a button instead
overload content with unnecessary links
use generic link text such as 'click here', 'see', 'more' or 'more information'
use a URL as the link text
use the same link text for different URLs on the same page
include end punctuation as part of the linked text

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.

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.