Button

Buttons kunnen gebruikt worden voor interactie binnen een pagina

Gebruik voor buttons altijd de <button> tag. Zo zien screenreaders ook dat het om een interactief element gaat. Wanneer een ander element als button gestyled wordt, gebruik dan javascript om het gedrag van een button na te bootsen.

Door de class .btn toe te voegen wordt een knop als button gestyled. Daarnaast kunnen er nog extraclasses worden toegevoegd voor alternatieve weergaves van buttons

• .btn--primary, styled de button als primaire actie
• .btn--disabled, styled de button als disabled. Wanneer de button een a tag is, dient ook tabindex="-1" gezet te worden, om te voorkomen dat de button focus krijgt.
• .btn--link, styled de button als een link. Kan niet disabled zijn.
• .btn--icon, voor buttons met alleen een icoon. Verwijderd de padding rondom het icoon. Voeg een title attribuut aan de button toe met een beschrijving van de knop.
• .btn--digid, een button met een DigiD logo.
  Let op dat visuele informatie ook voor blinden beschikbaar is.
  In dit geval dat inloggen met DigiD gebeurt. Dat kan bijvoorbeeld door in de knop achter de tekst 'inloggen' een span toe te voegen met class .screenreader-only en de tekst ' met Digi D'.
  Dan hoort een blinde dat als 'inloggen met Digi D'.

Link als knop

Knop als link

Button met enkel een icoon

Button met spinner

Het is mogelijk om een spinner in een button te plaatsen. Voorwaarde hiervoor is dat de button disabled is, zodat er niet nogmaals op geklikt kan worden. De spinner in een button dient met enige terughoudendheid gebruikt te worden. Alleen indien er sprake is van een wachtmoment waarbij de spinner niet op zichzelf kan worden ingezet, kun je de spinner in de button plaatsen.

Om de spinner te gebruiken, voeg je een div toe met de btn__spinner klasse.

DigiD buttons

Javascript

Wanneer een a tag als button gestyled wordt, is javascript nodig om de knop webrichtlijnen-proof te maken. Het script voegt de benodigde aria-roles toe, en zorgt voor een juiste afhandeling bij keyboardnavigatie.

<script>
    // Load button component
    System.import('/uno/components/button/button.js').then(function (module) {

        // Select all a.btn elements on the page
        var buttons = document.querySelectorAll('a.btn');

        // Initialize all 'fake' buttons
        for (var i = 0; i < buttons.length; i++) {
            new module.Button(buttons.item(i));
        }
    });
</script>

Benodigde stylesheets

• uno/components/button/button.css