Primaire button / Call to action

Gebruik:

De gebruiksregel voor dit element is om maximaal één primaire button per pagina te gebruiken.


Primaire button:


Primaire button met icon:



Primaire button met cms modifier:

.extern

.download

Secundaire button

Gebruik:

o.a. secundaire acties in formulieren


Secundaire button:


Secundaire button met icon:



Secundaire button met cms modifier:

.extern

.download

Tertiaire button

Gebruik:

Lage prioriteit interacties


Tertiaire button:


Tertiaire button met icon:



Tertiaire button - icon only:


Tertiaire button met cms modifier:

.extern

.download

Tertiaire button met modifier om hem dezelfde hoogte te geven als belendende buttons:

.btn-align

Button combinaties

Wanneer buttons bij elkaar gegroepeerd moeten worden aangeboden, moet een .dso-form-buttons worden toegepast. Doorgaans zullen deze groeperingen in context van een formulier staan, maar dit is niet noodzakelijk.

Als buttons links uitgelijnd moeten worden, worden deze gegroepeerd in een div.dso-aside. Uitzondering: dit is niet nodig in een .dso-single-page, daar worden de knoppen al links uitgelijnd.

Paginering door stappen


Paginering door stappen met extra tertiaire button


Met extra tertiaire button


Met secundaire button


Uitzondering: single page (.dso-single-page)


Uitzondering: single page (.dso-single-page), met secundaire button


Buiten formulier context, met single page (.dso-single-page)


Buiten formulier context, met single page (.dso-single-page), met secundaire button