Link Preview

A link is styled text that leads somewhere else, either within an experience or to a different app or site.

Don't use links for triggering actions, try a transparent button instead.


Get Windows 11


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


Each link type will show an underline on hover, focus, and press. To maximize visual cues that a link is selectable, include the inline property to underline a link in the rest and visited states. Use the inline treatment whenever there are links within a body of text.

Read more about Microsoft's inclusive design principles


In most cases, the default 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 so unless someone scrubs the page to see where they can hover or focus, they’re likely to miss subtle links.

Default vs subtle links

It’s safe to eliminate the inline style 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.

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.

Get Windows 11

Icon signifying what will happen next

View all apps

Icon providing visual indication of selectability

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


Visual cues

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

Visual cues

People who use assistive technology can access a list of all links on a webpage, so link text should make sense out of context. If you use “Learn more” as link text in the UI, include a more descriptive aria-label to alert screen readers to the link’s destination.


Make it short, descriptive, and actionable

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

Correct example
Incorrect example

“Learn more” is OK as link text when it immediately follows a statement and the target link provides more details about that statement. Don’t use “Learn more” if it’s possible to link a part of the initial statement.

Correct example

It should be obvious what someone will learn more about when they select a link.

View all apps

Don’t include “Learn more” links if they’re redundant or ambiguous.

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

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

Correct example

Don’t link end punctuation marks

View all apps

Don’t include end punctuation in standalone links