2.21.0
Links navigate to other pages or additional information.
Use in most cases.
<a href="#" class="mds-link">Link Text</a>
<mds-link href="#">Link Text</mds-link>
Use to avoid visual clutter.
<a href="#" class="mds-link mds-link--no-underline">Link Text</a>
<mds-link href="#" underline="false">Link Text</mds-link>
Use to highlight links within Data Tables.
<a href="#" class="mds-link mds-link--data-table">Link Text</a>
<mds-link href="#" in-data-table>Link Text</mds-link>
Class
|
Applies to
|
Outcome
|
---|---|---|
|
Any link element |
Adds default, visited, hover, and focus styles to a link. |
|
|
Removes the underline from link styles. |
|
|
Prevents visited styles from being applied after a link is visited. |
|
|
Removes the underline and swaps the link's default and hover styles. |
Use this mixin to add link styles to any element. Set $underline
to false to hide underlines. Set $visited-styles
to false to prevent a color change after a link is visited.
@include mds-link($underline: true, $visited-styles: true)
When combining header typography heading and link mixins, always include the link mixin mds-link
first. This avoids conflicting line-height
declarations.
[.my-custom-style] {
@include mds-link;
@include mds-level-1-heading;
}
When setting props as attributes on a custom HTML element, use kebab-case
instead of camelCase
.
Prop
|
Type
|
Validation
|
Default
|
Description
|
---|---|---|---|---|
|
String |
— |
— |
A space-separated list of class names that will be appended to the default |
|
String |
— |
— |
Sets the aria-label for the link. |
|
String |
— |
— |
If |
|
String |
Required |
— |
Destination for the link. If the link opens in a new window, use the |
|
Boolean |
— |
|
If |
|
String |
— |
— |
If set, adds |
|
String |
Required |
— |
The text of the link. Can also be passed in via the default slot. |
|
Boolean |
— |
|
If |
|
Boolean |
— |
|
If |
Pass text in between the <mds-link></mds-link>
tags to set the link’s text content. This can be overridden with the text
prop.
Setting href
and visitedStyling
via props. Using the default slot for text
content:
<mds-link href="contact-us.html" visited-styling="false"> Contact Us </mds-link>
href
attribute for a link.aria-label
attribute to describe the intent of a link.aria-label
, including the file-type and file-size.aria-label
.<a>
element.mds-link
class or mixin to an element other than <a>
.aria-label
should be clear and concise, using fewer than 100 characters will increase user comprehension.aria-label
should make sense out of context and clearly inform a user of what action will be taken if the link is selected. Don't rely on surrounding context to inform link content.aria-label
on an anchor tag automatically informs the user an element is a link. Words such as, “link”, “links”, or “go to” are repetitive and unnecessary.aria-label
text in all caps. Most screen readers read all cap text one letter at a time.aria-label
, include “Morningstar Developer Site”.aria-label
. These symbols are not recognized by most assistive technology.