Icoonknoppen

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 geven geen tekst weer. Voeg wel altijd de knoptekst toe voor gebruikers die gebruik maken van hulptechnologiën.

Voorbeelden

button

Visueel voorbeeld 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.

HTML-voorbeeld

<button class="icon icon-on-off" aria-label="Aan- of uitschakelen">Aan- of uitschakelen</button>

Visueel voorbeeld button met span

HTML-voorbeeld

<button>
  <span class="icon icon-on-off" aria-hidden="true"></span>Aan- of uitschakelen
</button>

Visueel voorbeeld svg binnen een button

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

HTML-voorbeeld

<button>
  <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-power"
    aria-hidden="true">
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M7 6a7.75 7.75 0 1 0 10 0"/>
    <path d="M12 4l0 8" />
    </svg>
  Aan- of uitschakelen
</button>

Icoon binnen linka visueel weergegeven als knop

Visueel voorbeeld

Inloggen

HTML-voorbeeld

<a href="./button-icon" class="button"><span class="icon icon-user" aria-hidden="true"></span>Inloggen</a>

Visueel voorbeeld, svg binnen een link, visueel weergegeven als knop

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

Inloggen

HTML-voorbeeld

<a href="./button-icon" class="button">
  <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-user"
    aria-hidden="true">
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/>
    <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
  </svg>
  Inloggen
</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";