- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Link
| Component status | Contribution |
|---|---|
| Current version | @spectrum-css/link@5.1.3 |
| Released | September 13, 2024 |
| S2-foundations | @spectrum-css/link@6.0.0-s2-foundations.13 |
| Released | September 12, 2024 |
Variants
PrimaryContribution
<a href="#" class="spectrum-Link">Link using spectrum-Link</a>
SecondaryContribution
<a href="#" class="spectrum-Link spectrum-Link--secondary">Link using spectrum-Link--secondary</a>
Static WhiteContribution
Hello, this is my spectrum-Link--staticWhite. This is just filler text, but if you keep reading maybe something good will happen.
<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 BlackContribution
Hello, this is my spectrum-Link--staticBlack. This is just filler text, but if you keep reading maybe something good will happen.
<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 (Primary)Contribution
This uses spectrum-Link--quiet.
<p> This uses <a href="#" class="spectrum-Link spectrum-Link--quiet">spectrum-Link--quiet</a>.</p>
Quiet (Secondary)Contribution
<p> This uses <a href="#" class="spectrum-Link spectrum-Link--quiet spectrum-Link--secondary">spectrum-Link--quiet and spectrum-Link--secondary</a>.</p>
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.
<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.
<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.