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.
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
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.
Layout
Default vs. subtle links
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.
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.
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.
Icon signifying what will happen next
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.
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.
Accessibility
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.
Accessible link text
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.
Content
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.”
“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.
It should be obvious what someone will learn more about when they select a link.
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.
Don’t link end punctuation marks
Don’t include end punctuation in standalone links