Icoonknoppen zonder achtergrond

Subtiele knopweergave.

Benodigde stappen:

  1. Voeg de class icon toe aan de knop om gebruik te maken van de visuele weergave van een icoonknop.
  2. Voeg de class van het gewenste icoon toe op de knop. Voor meer informatie zie: Iconen.

Aandachtspunten:

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

button

pseudo-element op button

Waarschuwing: Het voorbeeld met een pseudo-element direct op button wordt uitgefaseerd omdat het niet de voorkeur heeft omwille van toegankelijkheid. Gebruik in plaats hiervan een van de overige voorbeelden.

Visueel voorbeeld

HTML-voorbeeld

<button class="icon icon-only icon-search" aria-label="Zoeken">Zoeken</button>

button met span

Visueel voorbeeld

HTML-voorbeeld

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

svg binnen een button

Voorbeeld met een svg-icoon uit de tabler iconen set.

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.

Visueel voorbeeld

HTML-voorbeeld

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

button met img

Visuele weergave:

HTML-voorbeeld:

<button href="{base}/components/button-icon" class="icon-only">Lorem ipsum <img src="path/to/img.svg" alt="Kat"></button>

Link als knop met img

Visuele weergave:

Lorem ipsum Kat

HTML-voorbeeld:

<a href="{base}/components/button-icon" class="button icon-only">Lorem ipsum <img src="path/to/img.svg" alt="Kat"></a>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

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

Instelbare variabelen