• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express
Component status
Contribution
Current version@spectrum-css/link@4.2.5
ReleasedMarch 7, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Static White
Contribution

Hello, this is my spectrum-Link--staticWhite. This is just filler text, but if you keep reading maybe something good will happen.

Show markup
<div style="background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <p class="spectrum-Body" style="color: rgb(255, 255, 255);">
    Hello, this is my <a href="#" class="spectrum-Link spectrum-Link--staticWhite"> spectrum-Link--staticWhite</a>. This is just filler text, but if you keep reading maybe something good will happen.
  </p>
</div>

Static Black
Contribution

Hello, this is my spectrum-Link--staticBlack. This is just filler text, but if you keep reading maybe something good will happen.

Show markup
<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px; display: inline-block;">
  <p class="spectrum-Body">
    Hello, this is my <a href="#" class="spectrum-Link spectrum-Link--staticBlack"> spectrum-Link--staticBlack</a>. This is just filler text, but if you keep reading maybe something good will happen.
  </p>
</div>

Quiet (Static White)
Contribution

Hello, this is my spectrum-Link--staticWhite and spectrum-Link--quiet. This is just filler text, but if you keep reading maybe something good will happen.

Show markup
<div style="background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <p class="spectrum-Body" style="color: rgb(255, 255, 255);">
    Hello, this is my <a href="#" class="spectrum-Link spectrum-Link--staticWhite spectrum-Link--quiet"> spectrum-Link--staticWhite and spectrum-Link--quiet</a>. This is just filler text, but if you keep reading maybe something good will happen.
  </p>
</div>

Quiet (Static Black)
Contribution

Hello, this is my spectrum-Link--staticBlack and spectrum-Link--quiet. This is just filler text, but if you keep reading maybe something good will happen.

Show markup
<div style="background-color: rgb(181, 209, 211); padding: 15px 20px; display: inline-block;">
  <p class="spectrum-Body" style=" color: rgb(34, 34, 34);">
    Hello, this is my <a href="#" class="spectrum-Link spectrum-Link--staticBlack spectrum-Link--quiet"> spectrum-Link--staticBlack and spectrum-Link--quiet</a>. This is just filler text, but if you keep reading maybe something good will happen.
  </p>
</div>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration Guide

Subtle variant

Subtle variant was removed. Please use Quiet.