Anatomy
- Text: Describes where the link will take the user
- Leading Icon: (Optional) Helps clarify what the link will do
- Trailing Icon: (Optional) Helps clarify what the link will do
Usage Guidelines
When to use this component
- Use a link when the action is to navigate to a different page, a specific section on the same page, or an external website. This is a link's primary purpose.
- Use a link for progressively disclosing content. This allows users to access additional information only if they choose to, keeping the initial view clean.
- Use a link to direct users to content outside of your own website, such as a source, a citation, or a third-party service.
When not to use this component
- Do not use a link for an action that performs a function on the current page, like submitting a form, toggling a menu, or opening a modal. For these actions, a button is the correct component.
- Do not use a link for purely decorative purposes. A link should always be functional and serve a clear purpose, not just be used to style text.
-
Do not use a link when a button is more semantically appropriate. Buttons convey a sense of action (e.g., "Save," "Submit"), while links suggest navigation.
Best Practices
Use links to navigate between pages or to an external page.
Be descriptive with the links. Links should be understandable on their own.
Don't use generic wording such as "read more" or "click here", as they can't be understood without context.
Use icons to reinforce navigation cues i.e. showing the direction they user will follow, or indicating that link opens in a new tab.
Do not use icons for purely decorative purpose.
Inherit a color from the surrounding text to subdue the link, or to ensure a proper color contrast.
General Component Behaviors
- A link's primary function is to navigate. When clicked, it should take the user to a new location.
- By default, a link should open in the same browser tab or window.
- If it's a link to an external site, it should be explicitly set to open in a new tab to prevent the user from losing their place on your site.
- The cursor becomes a pointer while hovering and clicking the link. When the link is disabled, use not-allowed pointer.
- Links support leading or trailing icons depending on the link's needs.
If the link is taking the user back to a previous page, use the back arrow as a leading icon.
Always provide the external trailing icon when the link redirects the user from the system.
States
Styles
Default
Inherited color
If needed, a ink can inherit the color of the text surrounding it, in order to be less obtrusive. The text will still remained underlined to show the user that it is interactive.
Note: Due to Figma limitations the inherited color type is not part of the actual component, but instead is the text underlined. This does not effect developers.
Content Guidelines
Be Meaningful
Link text should clearly describe its destination. Don't use vague phrases like "click here," "more information," or "read more." These links are unhelpful for users who scan pages or use screen readers. Instead, the link text should stand on its own and make sense out of context.
- Do: "Read the Equalities Act 2010"
- Don't: "Learn about the Equalities Act 2010 here"
Front-load Your Links
Place the most specific and unique information at the beginning of the link text. This helps users quickly identify what they're looking for, especially when scanning a list of links.
- Do: "Apply for an older person's bus pass"
- Don't: "Find out how to apply for an older person's bus pass"
Use Active Language for CTAs
Call-to-action (CTA) links and buttons should be direct and use active, verb-based language. This encourages the user to take the next step. Keep the text concise, ideally 2 to 4 words, to ensure it's quick to absorb.
- Do: "Book your ticket" or "Shop now"
- Don't: "Submit" or "Continue" (unless the context is very clear)
Match Your Destination
The link text should directly reflect the title of the page it leads to. Consistency prevents user confusion and frustration. Mismatched or intentionally misleading link text erodes user trust and can harm your organization's reputation.
- Link Text: "Buy local apples now"
- Destination Page Title: "Fresh, local apples: buy yours today"
Use Sentence Case
For all inline links, calls to action, and button links, use sentence case. This improves readability and scannability compared to title case or all caps.
- Do: "Buy your ticket online"
- Don't: "BUY YOUR TICKET ONLINE"
For further information, see the Content Styleguide.
Research and Additional Reading
Known Gaps
- Component enhancement: Add a visited state for links that the user has clicked on already