Hyperlink and hyperlink button
[This documentation is preliminary and is subject to change.]
A hyperlink can take the form of either inline text (XAML and HTML) or a hyperlink button (XAML). In either form, a hyperlink is a piece of text that a user can tap to open a web page in a browser, or to navigate to another page—or to another section within the same page—in the current app.
Use a hyperlink when hypertext is the right interaction pattern—that is, text that responds when tapped and navigates the user to more information about, or related to, the text that was tapped. The navigation destination is encoded in a Uniform Resource Identifier (URI) in the NavigateUri property (XAML) or the href property (HTML).
A hyperlink that appears inline in dynamic text is best accomplished using a Hyperlink (XAML) or an a element | a object (HTML) so that you’ll benefit from automatic line-breaking within the hyperlink. A HyperlinkButton (XAML) can be used when you don’t need line-breaking or if you need to customize the visuals of the hyperlink.
By default, a hyperlink looks and operates like a conventional web hyperlink: text displayed in a distinct color, or an image, that can be tapped to trigger the navigation. But the visuals that make up a HyperlinkButton (XAML) can be customized.
As the user interacts with it, a hyperlink gives feedback by changing its state and therefore its appearance. Normal, pressed, and disabled are examples of hyperlink states.
- Consider whether you’ve made the hyperlink text as brief as you reasonably can.
- Keep individual hyperlinks far enough apart from one another that the user can tap them accurately.
- Only use the disabled state for a hyperlink if that state is temporary—such as other system processes are occurring—or if the hyperlink can be enabled by user action.
- Use the default font unless your brand guidelines tell you to use another.
As shown below, a button embedded into a sentence is a good opportunity for a rethink. If the button navigates the user to more information about, or related to, the text, then consider a hyperlink instead. If the button triggers another action then consider laying out the button in a different place, and reworking the text and the button’s content.
In this example, a button is not the correct control to use to display additional content to the user, because it takes up too much space and looks out of place.
In this example, a hyperlink works because it takes the same form as the rest of the text within the sentence.