For navigation within the app or in-app actions, see Button, Button group or Icon Button.
Anatomy
- Label: Text that describes the external destination
- Tap area: Invisible padding to ensure easy interaction
Usage Guidelines
When to use this component
Use Links when you need to navigate users to content outside the app, without interrupting the current flow with a primary action.
Typical use cases include:
- Navigating to external web pages
- Opening third-party services or platforms outside the app
- Referencing legal or informational content (e.g. Privacy Policy)
-
Linking to external documentation or support resources
When not to use this component
Do not use Links for actions or navigation that keep the user inside the app.
Avoid using Links:
- For internal screen-to-screen navigation
- To submit forms or confirm actions
- As a primary call to action
- When user feedback or loading states are required
Best Practices
Use links only for clearly navigate to external destinations or pages
Do not use links for in-app actions or internal navigation.
Inherit a color from the surrounding text to subdue the link, or to ensure a proper color contrast.
Do not overload screens with multiple links close together
Place links where users expect secondary or supporting actions
Do not rely on color alone to indicate that text is interactive
General Component Behaviors
When a Link is tapped, the user is taken outside the app context. Depending on the destination, this may:
- Open a web browser
- Launch another app
- Display external content in a system-managed view
States
Links provide clear visual feedback to communicate their interactive state:
- Default: Underlined text that indicates an available external destination
- Pressed: Shows immediate feedback when the user taps the link
- Focused: Visible focus ring indicator for supporting accessibility in screen reader navigation
Styles
Default
Links are visually light and their styles are based on underlining and text color. They are designed to blend naturally into the content and their default color is accent.
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.
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"
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"
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