A Link is a basic navigational element that allows users to navigate through your website or application. They may appear on their own, within a sentence or paragraph, or directly following content.
Usage
Do’s
Use a link to allow users to navigate to a new page or a section of the same page.
Use clear and descriptive link text
Dont’s
Use links to allow the user to perform an action that doesn’t result in a new page load or location.
Use “Click here“ as the link text
Alter the link styling in way that impacts accessibility
Links vs Buttons
Links and buttons have different behaviours and generally have distinct visual styling that differentiate from each other.
There are clear use cases that help you decide whether a link or a button is the appropriate interactive element:
Links
Navigating the user to a new page
Actions that result in a change to the URL
Actions that result in a browser refresh
Jumping to a section on the same page
Buttons
Toggling display views
Opening a modal
Triggering a popup menu
Interacting with media
Adding or removing elements to a selection
Links that look like buttons
In some cases links are styled to look like buttons to increase their prominence and align their styles with other interactive elements of a webpage. This should be avoided as much as possible, although design and brand choices sometimes make this difficult. Use your best judgement when designing links considering the information here, and across the we.
Anatomy
<insert image here>
| Item | Component type | Content type | Notes |
|---|---|---|---|---|
1 | X | X | X | MANDATORY |
Visual style
<explain different types of links>
<Explain size>
Primary
Secondary
Subtle
Nav
Selector
Retailer
Heading
Editorial
Behaviour
Accessibility
To be added:
Explain how retailer link works in Storybook
Explain what all variants are