Guidelines for hyperlinks
When selected, hyperlinks navigate the user to another part of the app, to another app, or launch a specific uniform resource identifier (URI) using a separate browser app. There are two main types of hyperlink: text that appears inline as dynamic text, and a button that appears as marked-up text.
Use a hyperlink when you need text that responds when selected and navigates the user to more information about the text that was selected.
Choose the right type of hyperlink based on your needs:
- Use a text hyperlink if you want automatic line-breaking and don't necessarily need a large hit target. Hyperlink text is often small and can be difficult to target, especially for touch.
- Use a button if you don't want automatic line-breaking or just need a larger hit target. The button height is 44epx.
Here's an example of a hyperlink as a text element that appears inline in dynamic text:
Here's an example of a hyperlink as a button. It appears as marked-up text, and can be placed inside a layout container:
- Only use hyperlinks for navigation; don't use them for other actions.
- Use the Body style from the type ramp for text-based hyperlinks.
- Keep discrete hyperlinks far enough apart so that the user can differentiate between them and has an easy time selecting each one.
- Add tooltips to hyperlinks that indicate to where the user will be directed.
- If the user will be directed to an external site, include the top-level domain name inside the tooltip, an style the text with a secondary font color.
- For designers
- Guidelines for tooltips
- For developers (XAML)
- Windows.UI.Xaml.Controls Hyperlink class
- Windows.UI.Xaml.Controls HyperlinkButton class
- For developers (HTML)
- a element | a object (HTML)