Links are a common web interaction element used throughout our websites and web apps. Links navigate to a destination – outside of the current context.
We currently have one link style: Standard.
The Standard link style relies on familiar link affordances: underline and text color.
There are three Link Types: Default, Article, and Implied. Each Link Type has a specific use.
Default links should be used for the majority of links. Default links have a neutral underline and inherit text color. The inherited text color allows Default links to blend in their context, while still having a distinct underline affordance.
Article is used for linking text within long-form blocks of text, such as instructions or blog posts. The Article link text is Utility Text Action color with a matching underline. The treatment makes Article links visual distinct in the block of text.
Implied links should be used when it’s obvious that the item being a linked is clickable (since there is no affordance). The link does not have a specific text color – it inherits its color from its parent. It also has no immediate affordance, the underline only shows up on the hover state.
Because of the limited affordances, this type should not be used within a larger block of text.
Text Color Inheritance
As mentioned above, the Default and Implied link types inherit their text color and theme from their parent DOM element. So in order for links to look their best, the recommended approach is to make sure the link’s anchor tag is the child of a parent Uniform type element (a paragraph or a heading element). That way you ensure colors and theming is handled correctly.
Link Best Practices
The following are best practices that should be considered when using Links.
Links vs Buttons
As mentioned above, Links should be used for actions that send the user somewhere else, outside of the current context, while Buttons should be used to trigger actions within the current context.
Linking the Right Words
- The linked text should either be the clear action, or the object itself. Do not use “click here” links.
- Additionally, entire sentences should not be linked, be specific about what you’re linking.
- When in doubt, remember that links are about destinations outside the current context. So if you’re unsure, link the text that describes the destination.
- A link is still an action, so avoid obscuring it within micro copy.
Links on Mobile Apps
Links as a concept do not really exist in the platform guidelines for either iOS or Android. Neither provides a native implementation of an inline text link.
Therefore, we recommend against using text links in our mobile interfaces except for the following specific use case: any text action that launches Safari or Chrome, taking you out of our app.
Often times this is either a full URL, or text describing the external website, but in either case, you should always use the Article or Default link type as the underline affordance is an indicator of this kind of external link. Additionally, ensure that these links are clearly positioned with appropriate tap targets – making them accidentally tappable is disruptive and hard to tap is frustrating. Often times copy design can help with this more than anything.