Ga naar hoofdinhoud

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​

Anchor​

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​