Icon Button - Component

View full screen
Code

Source (Nunjucks)

{% if data.tooltip %}
<button class="icon-button tooltip" aria-labelledby="icon-button-toolip">
  {% include "icons/close.svg" %}
  <span class="tooltip__content" id="icon-button-toolip">{{ data.tooltip }}</span>
</button>
{% else %}

<button class="icon-button" aria-label="{{ data.label }}">
  {% include "icons/close.svg" %}
</button>
{% endif %}

Output

<button class="icon-button" aria-label="Close">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    height="24"
    width="24"
  >
    <path d="M0 0h24v24H0z" fill="none" />
    <path
      d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
    />
  </svg>
</button>

Information

You have two choices when using this pattern. Use it in connection with the tooltip or set an aria-label on the <button class="icon-button"> element.

Key links

Variants

With Tooltip

View full screen
Code

Source (Nunjucks)

{% if data.tooltip %}
<button class="icon-button tooltip" aria-labelledby="icon-button-toolip">
  {% include "icons/close.svg" %}
  <span class="tooltip__content" id="icon-button-toolip">{{ data.tooltip }}</span>
</button>
{% else %}

<button class="icon-button" aria-label="{{ data.label }}">
  {% include "icons/close.svg" %}
</button>
{% endif %}

Output

<button class="icon-button tooltip" aria-labelledby="icon-button-toolip">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    height="24"
    width="24"
  >
    <path d="M0 0h24v24H0z" fill="none" />
    <path
      d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
    />
  </svg>
  <span class="tooltip__content" id="icon-button-toolip">Close</span>
</button>