Icoonknoppen zonder achtergrond

Subtiele knopweergave.

Benodigde stappen:

  1. Voeg de class icon-only toe aan de knop om gebruik te maken van de visuele weergave van een icoonknop zonder achtergrond.
  2. Voeg een icoon toe aan de knop. Zie voor meer informatie: Icoonknop.

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