UNPKG

@utrecht/button-css

Version:

Button component for the Municipality of Utrecht based on the NL Design System architecture

github.com/nl-design-system/utrecht

31 lines (19 loc) • 1.58 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- @license CC0-1.0 --> # Gerelateerde componenten Vaak gebruik je een button in combinatie met de _button group_ component: plaats de button in een _button group_ als je ruimte tussen de button en andere componenten wilt. ## Gebruik je een button of link? Sommige ontwerpen hebben een button om naar een andere pagina te gaan. Sommige ontwerpen hebben link in een formulier om naar de vorige pagina te gaan, terwijl de gegevens wel tussentijds verstuurd en opgeslagen worden. Het is belangrijk dat je het goede HTML-element gebruikt dat past bij de actie, in plaats van het HTML-element kiest dat past bij het ontwerp. Om deze patronen te gebruiken zijn er vier componenten nodig: - link - link die eruit ziet als button - button - button die eruit ziet als link Gebruik alleen een `<a>` element wanneer er geen gevolgen zijn. Gebruik een `<button>` element als je niet de browser back button kan gebruiken om het effect ongedaan te maken. Enkele voorbeelden waar je een link gebruikt: - een _call to action_ om te registreren: een link. - een knop om naar het loginformulier te gaan: een link - dezelfde pagina in een andere taal bekijken: een link. Enkele voorbeelden waar je een button gebruikt: - "Volgende stap" of "vorige stap" in een formulier. Gebruik een submit button wanneer gegevens tussendoor opgeslagen worden of verstuurd worden. - Uitloggen: button. Log niet uit met een link! Je navigatie moet het ondersteunen om zowel links als button dezelfde stijl te geven. - de voorkeurstaal aanpassen en dezelfde pagina in een andere taal bekijken: een button.