Windows apps
Collapse the table of content
Expand the table of content

Hyperlink and hyperlink button

[This documentation is preliminary and is subject to change.]

An example of what a standard hyperlink control looks like

Control description

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.

Usage guidance

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.

Appearance and interaction

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.

Design guidelines

  • 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.

IncorrectCorrect
Example of incorrect use of a checkbox controlExample of correct use of a checkbox control

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.

 

Examples

A screenshot that illustrates the standard hyperlink control

Related topics

a element | a object

HyperlinkButton class

Hyperlink class

Guidelines for links

 

 

Show:
© 2016 Microsoft