Base

Class	Description
.ui-link	Base class

Variant

Class	Value
.ui-link--muted	muted
.ui-link--subtle	subtle

Disabled

Class	Description
.ui-link--disabled	disabled

External

Class	Description
.ui-link--external	external

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-link-color	var(--ui-color-primary)	Text color
--ui-link-color-hover	var(--ui-color-primary-hover)	Color hover
--ui-link-color-visited	var(--_color)	Color visited
--ui-link-decoration	underline	Decoration
--ui-link-decoration-hover	underline	Decoration hover
--ui-link-color-muted	var(--ui-color-text-muted)	Color muted
--ui-link-color-muted-hover	var(--ui-color-text)	Color muted hover

<!-- For secondary or less prominent links -->
<a class="ui-link ui-link--muted" href="#">Muted link</a>

<!-- No underline by default, shows on hover -->
<a class="ui-link ui-link--subtle" href="#">Subtle link</a>

<!-- Adds arrow indicator for external links -->
<a class="ui-link ui-link--external" href="#">External link</a>

<a class="ui-link ui-link--disabled" href="#" aria-disabled="true">Disabled link</a>

<!-- Links inherit text size from context -->
<p style="font-size: var(--ui-size-sm);">
Read our 
  <a class="ui-link" href="#">privacy policy</a>
 for more information.
</p>