[role="link"]

Any element with role="link" is rendered as a link.

This is useful when a non-link element (e.g. <button>, <div>) needs to behave and look like a link.

Basic Usage

<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">
  <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>