Componenten
Button
Buttons worden gebruikt om acties uit te voeren.
Ook bekend als: Boeton, Beton, Nottub of knoppie
Gerelateerde componenten: links als button, Destructive button, Button groep
Bijvoorbeeld gebruikt in: Open Formulieren, Huwelijksplanner en Eigen Template
Voorbeeld
CSS
Casscading style sheets
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, voluptatibus!Kopieer
HTML
Hyper text mark up link
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, voluptatibus!Kopieer
Web Component
Dit is het webcomponent
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, voluptatibus!Kopieer
React
Dit is het React code
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, voluptatibus!Kopieer
Vue
Dit is het Vue cod
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, voluptatibus!Kopieer
Figma
Dit is het Figma design
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores, voluptatibus!Kopieer
npm install @NLDS ButtonKopieer
Bekijk in Storybook Bekijk in github Changelog| Name | Description | Default | Control |
|---|---|---|---|
| active | active | - | False | True |
| active | active | - | False | True |
| active | active | - | False | True |
| active | active | - | False | True |
Design tokens
Korte beschrijving over design tokens. Lees meer over design tokens
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aspernatur magni hic adipisci incidunt vel obcaecati, repellat unde aperiam tempora?
Toepassen
Gebruik
Wel gebruiken voor
Niet gebruiken voor
Kleur
Bijvoorbeeld een stuk over de kleuren van buttons.
Wel
stukjes over wat je wel moet doen
Niet
stukjes over wat je niet moet doen
Iconen
Bijvoorbeeld een stuk over wanneer en hoe iconen te gebruiken in button.
Formaten
Bijvoorbeeld een stuk over hoe om te gaan met formaten. Wijzen op target size.
Buttons combineren
Bijvoorbeeld een stuk over hoe je buttons kunt combineren.
Positie
Bijvoorbeeld een stuk over hetd positioneren van button bij het formulier of binnen een modal
Begeleidende tekst bij afbeelding
Variaties
Primaire acties
...
Secundaire acties
...
Gedrag
Responsive
stuk over het responsive gedrag.
Focus order
stuk over focus order.
- ...
- ...
- ...
- ...
Verschillen in content
Bijvoorbeeld veel tekst, weinig tekst, geen tekst, geen afbeeldingen, etc.
Toegankelijkheid
Stuk over toegankelijkheid
Copy
Wel
Niet
Beveiliging (security)
Stuk over beveiliging.
Privacy (AVG)
Stuk over privacy.
Aanvullende informatie
Onderzoek
Heb jij onderzoek beschikbaar ? Deel je onderzoek met het NL Design System
Estafette status
De status van het button Component is momenteel: Community. Meer over het estafettemodel
Changelog
Links
Uit een onderzoek van Gemeente Utrecht blijkt dat laaggeletterden afschrikken van de kleur rood. Bijboorbeeld als achtergrondkleur van een knop. De tekst wordt niet gelezen, de laaggeletterden acteert op kleur. Deze kleur wordt daarom niet langer als standard interactie kleur toegepast.
Er zijn verschillde vormen van kleurenblindheid.
Vanuit het NL Design system zelf kiezen we momenteel wel voor pixels. Dit komt [reden]
Help deze documentatie te verbeteren
Om ervoor te zorgen dat deze documentatie nuttig, relevant en up-to-date is, kun je: Een wijziging voorstellen via Github
Vragen
Heb je een vraag? Twijfel niet en neem contact op met het kernteam.