Link Preview

A link is interactive text that lets people navigate somewhere else, either within an experience or to a different app or site.

Don't use links for triggering actions other than navigation. To create a secondary action with low visual emphasis, try a transparent or subtle button instead.

Loading...

Resources


Types

Get Windows 11

Default

Default links are styled the theme color. These are the most accessible link style and should be used most of the time.

View all apps

Subtle

Subtle links are the same color as body copy and are less accessible than default links. Use subtle links for less visual weight but consider adding other cues that they’re selectable, like an icon.


Behavior

By default, all links show an underline in the hover, focus, and pressed states. The optional inline link behavior also includes an underline in the rest and visited states. Use inline behavior to maximize visual cues that a link is present and interactive, especially if it appears next to other body text.

Read more about Microsoft's inclusive design principles

Inline links add an underline in rest and visited states for additional visual cues


Layout

In most cases, the default link type is the best option for ensuring people can easily scan and recognize links within an interface.

Use subtle links with caution. Out of the box, they don’t have any visual indications that they’re interactive. Unless someone hovers or focuses on subtle links, they might miss them.

Default vs subtle links

Subtle links don’t indicate interaction until hover or focus and are less accessible

It’s safe to eliminate the inline behavior on subtle links in obvious lists of links, like in footers or navigation panels. Because people typically understand these patterns provide navigation options, the additional visual cues aren’t needed.

Subtle links are OK in navigation UI

Subtle links are OK in parts of the UI dedicated to navigation, like footers

Using icons in addition to link text can give people hints about what will happen if they select a link, like the open icon signifying an external link destination. Icons, like chevron right >, can also provide additional visual cues that a link is selectable if the inline treatment isn’t used.

Use icons to indicate a new window will open

Open icon signifies the link opens a new context

Use chevron to indicate a subtle link is interactive

Chevron signifies the text is interactive

The coded Link component does not include an icon slot by default. To include an icon in your link, place an <i> or <span> as a child of the <Link> component.

Keep discrete links far enough apart that people can tell they lead to different places. Spacing out links also helps people with reduced motor skills select the right one easily.

Link spacing

Links that are too close together can he hard to distinguish and select


Accessibility

Visual cues

Links need to have at least two visual indications that they’re interactive. Be sure to use a combination of cues like color, underline, icons, focus, and cursor change to let people know they can select a link.

Visual cues

People who use assistive technology can navigate by accessing a list of all links on a page, so link text must make sense out of context. Be careful when embedding links in sentences since sentence parts read in isolation can be confusing. Additionally, links within sentences may be harder to localize since sentence structures vary across languages.

Correct example

It should be obvious where a link will lead

Incorrect example

Ambiguous link text is inaccessible

If you can’t avoid vague link text in the UI, be sure to include a more descriptive aria-label that identifies the link’s destination.

Steer clear of multiple identical links on a page. They can create ambiguity for everyone and complicate navigation for some people, like those who use voice control.

Opening new contexts

Use caution when using a link to navigate to a new context as it can be disorienting. If a link opens in a new tab or window, be sure to inform people beforehand. Add a visual cue, like the open icon, and an aria-label indicating the link goes to a new tab or window.


Content

Make it short, descriptive, and actionable

People should be able to accurately predict the purpose of a link based on its link text. Don’t use URLs or generic text like “Click here” to label links.

Correct example

Link text should be short and specific

Incorrect example

Avoid vague link text

Avoid using “Learn more” links without specifying what someone will learn more about. Consider dropping “more” in cases where you need to save space.

Correct example

Make it clear what people will learn about

View all apps

”Learn more” links alone can cause confusion

Capitalize the first word

Use sentence style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.

Skip the period

If linking within a body of text, don’t include punctuation in the link. Standalone links don’t need end punctuation at all, even if they’re full sentences. For more info, go to Periods in the Microsoft Writing Style Guide.

Don't link punctuation