Links

Link colors

.link-{color} sets the link's resting color from the theme palette - functionally identical to .text-{color}, but scoped semantically to links.

<a href="/pricing" class="link-primary">See pricing</a>
<a href="/delete" class="link-danger">Delete account</a>

State variants

Every .link-{color} class ships with matching hover:, focus:, and active: pseudo-class variants generated automatically.

<!-- Secondary at rest, primary on hover -->
<a href="#" class="link-secondary hover:link-primary">Read more</a>

<!-- Visible focus ring color for keyboard nav -->
<a href="#" class="link-dark focus:link-primary">Skip to content</a>

Darkened shades

.link-{color}-{shade} applies a darkened tone directly (shades run 100–900, in 10% increments), and works as a standalone class or prefixed with hover:/focus:/active: for a state-only change.

<a href="#" class="link-primary hover:link-primary-100">
  10% darker on hover
</a>

Links as buttons

Give a link the visual weight of a button by combining .link-{color} with spacing, border, and border-radius utilities. The link stays a real <a href>, so middle-click and keyboard navigation still work.

<a href="#" class="link-white hover:link-white hover:d-none bg-primary px-4 py-2 rounded border-0">
  Primary
</a>

<!-- Outline style -->
<a href="#" class="link-primary hover:link-primary hover:d-none bg-none border border-primary px-4 py-2 rounded">
  Outline
</a>

Any theme color works. .link-{color} and its state variants are generated for every key in $theme-colors - see the full palette on the Colors page.