2.11.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="true">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;
}
Prop | Type | Validation | Default | Description |
---|---|---|---|---|
|
String |
–– |
–– |
Accessible text describing the purpose of the link. |
|
String |
–– |
–– |
A space-separated list of class names that will be appended to the default |
|
String |
–– |
–– |
If |
|
String |
Required |
|
Destination for the link. If the link opens in a new window, use the |
|
String |
–– |
–– |
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 |
inDataTable
would be written as in-data-table
.Any text or markup passed in between the <mds-link></mds-link>
tags will be used as the link’s content. This slot can accept plain text, or a combination of text and any tags where appropriate. If no content is passed in via the slot and the text prop is empty, the link content will be “undefined”.
Setting text and href and suppressing visited styling:
<!-- Using Props -->
<mds-link text="Contact Us" href="contact-us.html" visited-styling="false"></mds-link>
<!-- Using Slots -->
<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.