Button
Buttons geven gebruikers de mogelijkheid om actie te nemen en keuzes te maken in een enkele klik. Buttons communiceren acties die gebruikers kunnen nemen. Ze moeten makkelijk te identificeren en makkelijk te vinden zijn. Tegelijkertijd moet een button duidelijk de actie aantonen die de gebruiker moet volbrengen. Gebruik vorm en kleur om een button visueel als button herkenbaar te maken voor de gebruiker.
- Plaats buttons waar gebruikers ze verwachten en makkelijk vindbaar zijn
- Van belang zijn: de grootte van een button, de 'touch size' en witruimte rondom
- Verschillende platvormen gebruiken verschillende formaten buttons
- Let op positie en volgorde met name als buttons in groepen staan (vorige/volgende) benadruk welke primair is of de belangrijkste actie aanduidt
- Een actieknop moet opvallen: gebruik daarom een contrasterende kleur
- Gebruik visuele hints om aandacht te vestigen op een actieknop
Primaire buttons
De primaire actie is die button waarmee de gebruiker de taak volbrengt.
Als de gebruiker op het punt staat een onomkeerbare actie te ondernemen is de 'Annuleer' knop de primaire actie en krijgt deze visueel meer aandacht omdat de gebruiker goed na moet denken voordat hij/zij reageert.
In dit geval moet de veilige actie de aandacht krijgen en dus niet de onomkeerbare actie.
- Tekst wit, Asap semibold 16
- De rechthoekige grasgroene achtergrond (
#39870c) heeft afgeronde hoeken van 4 pixels en een hoogte van 48 pixels - Wordt één keer per scherm gebruikt tenzij het dezelfde actie betreft
- Uitzondering is gebruik in de header of in een modal
- Niet elk scherm heeft een primaire knop nodig
Primaire button varianten
Disabled
Link
Small
✨ Zie voor meer voorbeelden en het gebruik van de primaire button de button-row pagina.
Secundaire buttons
- Tekst grasgroen, Asap semibold 16
- De rechthoekige witte achtergrond heeft een omlijning van 1 pixel in grasgroen (
#39870c), afgeronde hoeken van 4 pixels en een hoogte van 48 pixels - Dit is de standaard button voor de meeste gebruikscasussen
✨ Zie voor meer voorbeelden en het gebruik van de secondary button de button-row pagina.
Tertiaire buttons
Tertiaire buttons worden gebruikt voor overige diverse acties: de actie is belangrijk maar hoeft niet datgene te zijn waarnaar de gebruiker op dat moment op zoek is.
Voorbeelden hiervan zijn 'wijzigen' of 'toevoegen' mits dit natuurlijk geen primaire acties zijn.
In het algemeen wordt hiervoor een minder prominente button stijl gebruikt.
- Tekst grasgroen (
#39870c), Asap semibold 16 - En/of icoon in grasgroen (
#39870c)
✨ Zie voor meer voorbeelden en het gebruik van de tertiare button de button-row pagina.
Afbrekingen met ellipsis
Gelet op WCAG succescriterium 1.4.4 zijn afbrekingen met ellipsis acceptabel als de volledige content beschikbaar is op focus of na activatie van de gebruiker. Dit gepaard met een indicatie dat deze informatie toegankelijk is voor de gebruiker, naast het feit dat het afgebroken is.
Hoe te gebruiken: Kleine buttons
Door de toevoeging van de class .dso-small worden buttons kleiner getoond.
Standaard zijn primaire en secundaire buttons 48 pixels hoog en worden dan 30 pixels hoog.
Gedrag en toegankelijkheid
- Als zintuiglijke informatie wordt gebruikt (denk bijvoorbeeld aan knoppen met een chevron om naar de vorige of volgende pagina te gaan), voeg dan de tekst "volgende pagina" en "vorige pagina" toe;
- Elementen zoals buttons die er hetzelfde uitzien, moeten ook overal hetzelfde 'doen';
- Button tekst moet beschrijven wat het doet.
Bronvermelding
Button Row
Button rows geven de gebruiker de mogelijkheid om meerdere buttons achter elkaar te plaatsen. Dit kan dienen om bijvoorbeeld een 'toolbar' na te bootsen of om te laten zien welke opties er mogelijk zijn voor het desbetreffende onderdeel of sector op de pagina. Er gaan maximaal 6 buttons in een button-row. Anders wordt het te onoverzichtelijk en verliest het zijn functie.
De buttons die achter elkaar geplaatst worden dienen dezelfde variant te hebben: primary, secondary of tertiary. Ze worden niet door elkaar gebruikt.
Emphasized
Een variant van de button-row is de emphasized variant. Hierin worden tertiaire buttons geplaatst die zwart zijn en de row heeft een grijze achtergrond.
Primaire buttons in een button-row
Hierboven staan enkele voorbeelden van het gebruik van de primaire button en zijn varianten. Deze zijn hier in de button-row gepresenteerd zodat men ook het gebruik van de row ziet.
Secundaire buttons in een button-row
Hierboven staan enkele voorbeelden van het gebruik van de secundaire button.
Tertiaire buttons in een button-row
Hierboven staan enkele voorbeelden van het gebruik van de tertiare button.