Links

Inline text links are used to provide navigation to another screen and/or to prompt additional information to be displayed on the current screen.

All Text Primary Link
All Text Disabled Link
Properly Disabled Link Using Span
Default
Hover
Selected
Focused
Disabled

When to Use

  • Use a text link for access points that appear contextually within a paragraph or other strings of text.

When Not to Use

  • Do not use when an action needs to be prominently displayed. Instead, use a button treatment.
  • For less important navigation that appears in a stand-alone context (not within a string of text) a text button may also be considered.

Developer Notes

All Text Primary Link
All Text Disabled Link
Properly Disabled Link Using Span 
<a href="javascript: void(0);" class="spark-link">All Text Primary Link</a>
<br />
<a href="https://google.com" class="spark-link" disabled>All Text Disabled Link</a>
<br />
<span href="https://google.com" class="spark-link" disabled>Properly Disabled Link Using Span</span>
  • All text links will default to the primary styling when used with an anchor element <a>.
  • Primary links can also be invoked with .spark-link.
  • If a link needs to be disabled add the disabled attribute. The disabled class will overwrite the color, cursor and pointer-event of the other .spark-link classes.

NOTE: It is best to change the anchor element <a> to a span element <span>. Some browsers do not fully support the disabled link’s CSS rule pointer-events: none; in order to disable clicking the link. It will also remove the link from the tabindex, which is the intended event.