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.
Resources
Types
Default
Default links are styled the theme color. These are the most accessible link style and should be used most of the time.
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
Inline links
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.
Inline links add an underline in rest and visited states for additional visual cues
Layout
Default vs. subtle links
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.
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 parts of the UI dedicated to navigation, like footers
Icons in links
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.
Open icon signifies the link opens a new context
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.
Link spacing
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.
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.
Link text
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.
It should be obvious where a link will lead
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.
Link text should be short and specific
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.
Make it clear what people will learn about
”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.
