Mini buttons and links

Small and repeatable

While it’s important we understand the use of Links vs. Buttons in Modern Web Applications, the two can sometimes benefit from looking the same. Especially in listings where edit can be a link and remove a button, and it wouldn't make sense to separate the two more than by their inherent cursor.

These styles are transparent, meaning that the background element’s colour is also visible through the darker variant and hover/focus states.

These buttons are good for providing hover effect to icon-only buttons like expand and close in sections or alert messages. Remember to include the title attribute on the button or link in such cases.

These have an active utility class similar to their pseudo-class.

If clicking on the icon makes the element not clickable, add class pointev-none on the icon.

If you’re making tabs, use tabs

Classes and usage

Implied action

btn-link is typically used when the items don’t have to stand out – where it’s apparent that it’s a button or a link. For instance in tables where the same action is repeated.

Link Icon and text

Apparent action

btn-link--dark is intended for when the items need to stand out from the background.

Link Icon and text

<button class="btn-link">Button</button>
<a class="btn-link">Link</a>

<button class="btn-link--dark">
<span
  data-mybicon="mybicon-key"
  data-mybicon-class="mrxs"
></span>
<span>Icon in dark button</span>
</button>
<a class="btn-link--dark">
<span
  data-mybicon="mybicon-trash"
  data-mybicon-class="mrxs"
></span>
<span>Icon in dark link</span>
</a>

<button class="btn-link" title="Remove">
<span
  data-mybicon="mybicon-cross"
></span>
</button>
<a class="btn-link" title="More">
<span
  data-mybicon="mybicon-dotdotdot"
></span>
</a>

<button class="btn-link active">Active button</button>

Help text button

btn-link--help is a single-use modifier class for the button triggering helptexts. See Help and information

Header, label or term

<button
  type="button"
  class="btn-link btn-link--help"
  aria-label="Toggle explanation"
  title="Toggle explanation"
>
  <span
    data-mybicon="mybicon-help"
    data-mybicon-width="16"
    data-mybicon-height="16"
  ></span>
</button>