Components › Utilities

Interactions

Set of utilities that provide interaction(s).

Text Link ResetText Link Reset › HyperlinkText Link Reset › ButtonText Link Resetdev ready

Preview

Code

<a href="javascript:void(0);" class="slds-text-link--reset">Link</a>

The .slds-text-link--reset class makes links appear as regular text. Can be applied to <a> or .slds-button.

Text LinkText Linkdev ready

Preview

Code

<a href="javascript:void(0);" class="slds-text-link--reset">This text is a link but looks like normal text...<span class="slds-text-link">More</span>.</a>

Used in combination with .slds-text-link--reset, you can apply the class .slds-text-link to a child element to reset its styles back to that of a link.

Blur FocusBlur Focusdev ready

Preview

Code

<a href="javascript:void(0);" class="slds-has-blur-focus">Link with blur focus</a>

Blur focus is an accessibility class that will add a blurred border to an element when it is focused.

Faux LinksFaux Linksdev ready

Preview

Code

<span class="slds-type-focus">Span with faux link interactions</span>

Faux links are used on areas that can't be wrapped in an a element, but need to appear to be a link with an underline on hover. An example is in the page header for Object home. The H1 and button that sit next to each other have the .slds-type-focus class on their parent element.

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-has-blur-focus
Applied to:

any element

Outcome:

Blur focus is an accessibility class that will add a blurred border to an element when it is focused.

Required:

No, optional element or modifier

Comments:

--

.slds-type-focus
Applied to:

container

Outcome:

Creates a faux link with interactions

Required:

No, optional element or modifier

Comments:

This is used when an actual anchor element can not be used. For example — when a heading and button are next to each other and both need the text underline

.slds-text-link--reset
Applied to:

<a> or .slds-button

Outcome:

Makes links and buttons appear as regular text

Required:

No, optional element or modifier

Comments:

--

.slds-text-link
Applied to:

any element

Outcome:

Makes text inside of .slds-text-link--reset to appear as a link.

Required:

No, optional element or modifier

Comments:

--