Links

Links are implemented using the <a> element and whenever you need to stylize an element like one, you can use the role="link" ARIA: link role.

Basic Usage

The aria-current="page" attribute tells assistive technologies which link represents the current page.

<a href="#">Regular Link</a>

<hr>

<a href="#" aria-current="page">Active link</a>

Elements rendered as a link

Simply add role="link" to any element to make it behave like a link, including being keyboard-accessible and focusable by default.

<button role="link">
  &lt;button&gt; as link
</button>

<hr>

<button role="link" aria-current="page">Active button</button>

<hr>

<div role="link">
  &lt;div&gt; as link
</div>

<hr>

<div role="link" aria-current="page">Active div</div>

Intent Variants

To convey intent and importance, links can be styled with different variants:

<section class="auto-grid">
  <a href="#" class="primary">Primary</a>
  <a href="#" class="secondary">Secondary</a>
  <a href="#" class="contrast">Contrast</a>
  <a href="#" class="success">Success</a>
  <a href="#" class="info">Info</a>
  <a href="#" class="warning">Warning</a>
  <a href="#" class="danger">Danger</a>
</section>

<hr>

<section class="auto-grid">
  <button class="primary" role="link">
    &lt;button&gt; as link
  </button>
  <button class="secondary" role="link">
    &lt;button&gt; as link
  </button>
  <button class="contrast" role="link">
    &lt;button&gt; as link
  </button>
  <button class="success" role="link">
    &lt;button&gt; as link
  </button>
  <button class="info" role="link">
    &lt;button&gt; as link
  </button>
  <button class="warning" role="link">
    &lt;button&gt; as link
  </button>
  <button class="danger" role="link">
    &lt;button&gt; as link
  </button>
</section>