@nl-rvo/css-button
v1.1.2
Published
Button CSS component
Downloads
278
Readme
Button
Wanneer gebruik je het component
De button wordt gebruikt om gebruikers een actie te laten uitvoeren zoals het starten van een aanvraag of het verzenden van een formulier.
Anatomie van een button
Een button bestaat uit:
- Buttontekst
- Icoon (niet verplicht)
Richtlijnen
- Zorg ervoor dat de buttontekst duidelijk omschrijft welke actie er uitgevoerd gaat worden zoals 'Start aanvraag' of 'Verstuur contactgegevens'.
- Gebruik geen 'Volgende' als buttontekst. Dit is geen werkwoord en kan niet in combinatie met andere acties gebruikt worden. 'Opslaan en volgende' is niet logisch.
- Gebruik in plaats daar van 'doorgaan' of 'Opslaan en doorgaan'.
- Wanneer de button in een dialog element gebruikt wordt vermijd dan de tekst 'OK' als buttontekst omdat het niet duidelijk is wat er gebeurd als de gebruiker er op klikt. Gebruik daarom 'Sluit' of 'Akkoord en sluit'.
- Probeer maximaal één primaire button per pagina te gebruiken. Meerdere primaire buttons per pagina kan verwarrend zijn voor de gebruiker omdat er niet duidelijk is wat de focus is.
- Gebruik de waarschuwing buttons alleen voor destructieve acties zoals het permanent verwijderen van een account. Zorg er bij dit soort acties ook voor dat deze eerst bevestigd moet worden voordat het daadwerkelijk uitgevoerd wordt.
- Gebruik meer aanwijzingen dan alleen een rode kleur voor een destructieve actie omdat mensen die kleurenblind zijn het verschil niet goed zien. Denk bijvoorbeeld aan een prullenbak icoon of een duidelijke buttontekst.
- Probeer uitgeschakelde buttons zoveel mogelijk te vermijden. Ze hebben opzettelijk een slecht contrast en kunnen gebruikers verwarren. Gebruik ze alleen als uit gebruikersonderzoek blijkt dat gebruikers de interface makkelijker begrijpen.