Icoonknoppen zonder achtergrond

Introductie

Icoonknoppen zonder achtergrond geven geen tekst weer. Voeg wel altijd de knoptekst toe voor gebruikers die gebruik maken van hulptechnologiën.

Snelstart

SCSS importeren:

    
    @use "@minvws/manon/components/button";
@use "@minvws/manon/components/icon";
@use "@minvws/manon/components/button-icon-only";

Voorbeelden

Voorbeeld: button met span

    
    <button class="icon-only"><span class="icon icon-search" aria-hidden="true"></span>Zoeken</button>

Voorbeeld: button met svg

    
    <button class="icon-only">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="icon icon-tabler icons-tabler-outline icon-tabler-search"
    aria-hidden="true"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
    <path d="M21 21l-6 -6" />
  </svg>
  Zoeken
</button>
Aandachtspunten:
  • Als het icoon puur decoratief is, kan deze verborgen worden voor screenreader-gebruikers. Dit kan doormiddel van een aria-hidden="true" op de svg.
  • Als het icoon informatief is dient deze een kort en duidelijk label te krijgen als alternatief voor screenreader-gebruikers. Bijvoorbeeld: aria-label="Gebruikersprofiel". Het icoon dient in dit geval ook role="img" te krijgen.