@utrecht/button-css NPM

Button

De button component gebruik je zodat de gebruiker acties kan uit te voeren en de user interface kan bedienen.

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.

Toepassing

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.

Anatomie

Terminologie

button: van het <button> HTML element, role="button" in ARIA.
appearance: van de CSS appearance property (bijvoorbeeld: appearance: push-button).

States

normal
active: de gebruiker activeert de button op dit moment. Bijvoorbeeld door er op te klikken. De active state duurt maar heel kort.
pressed: een ingedrukte button, bijvoorbeeld de bold button in een toolbar van een rich text editor, of de button van een date picker popup. Een button kan lange tijd pressed zijn, in tegenstelling tot active.
hover: de gebruiker heeft de aanwijzer boven de button. Bijvoorbeeld door met de muiscursor er over te 'zweven'.
focus
focus en focus-visible: de link heeft de focus door de Tab knop van het keyboard.
disabled
disabled en focus-visible: als een button disabled is (zeker een primary action button), dan moet wel duidelijk zijn dat de button er is en wat je kunt doen om verder te komen. Screen reader gebruikers moeten daarom focus kunnen hebben op een disabled button, om de bijbehorende uitleg te horen.

Design

Maak elke button 44×44px of groter (WCAG 2.5.5).

HTML

Gebruik het <button type="button"> element in HTML om een button te maken.

Een alternatief op <button> is bijvoorbeeld <input type="button">, maar die heeft minder mogelijkheden voor de inhoud van de button. Je kunt er bijvoorbeeld geen SVG icon in plaatsen. Nog een alternatief is <div role="button" tabindex="0">, maar <button> heeft het voordeel dat die ook werkt zonder CSS en zonder JavaScript.

Formulieren verzenden

Voor formulieren verzenden gebruik je <button type="submit">. Gebruik ook de submit event van een formulier en niet alleen de click event van de button, zodat je ook vanuit een formulierveld op Enter kan drukken om het formulier te verzenden.

Hoe het niet moet

Geen koppeling met uitleg over button

Niet:

<p>
  <label for="upload">Bijlage:</label>
  <input type="file" id="upload" />
</p>
<p>Je mag een JPG of een PDF uploaden.</p>

Wel:

<p>
  <label for="upload">Bijlage:</label>
  <input type="file" id="upload" aria-describedby="upload-description" />
</p>
<p id="upload-description">Je mag een JPG of een PDF uploaden.</p>

Niet:

<p>
  <button type="submit">Verzenden</button>
</p>
<p>Door het formulier te verzenden ga je akkoord met de algemene voorwaarden.</p>

Wel:

<p>
  <button type="submit" aria-describedby="submit-description">Verzenden</button>
</p>
<p id="submit-description">Door het formulier te verzenden ga je akkoord met de algemene voorwaarden.</p>

Geen koppeling met foutmelding bij een button

Niet:

<p>
  <button type="submit">Opslaan</button>
</p>
<p class="error">Je bent uitgelogd. Log opnieuw in om je wijzigingen op te slaan.</p>

Wel:

<p>
  <label for="upload">Bijlage:</label>
  <input type="file" id="upload" aria-describedby="upload-description" />
</p>
<p id="upload-description" class="error">Je mag een JPG of een PDF uploaden.</p>

Relevante WCAG regels

WCAG eis 2.1.3: je kan de button activeren met Enter of Space, en het is mogelijk met Tab de button te focussen. Space gebruiken heeft dan niet het effect dat de pagina scrollt.
WCAG eis 2.4.6: de label van de button moet duidelijk zijn
WCAG eis 2.5.2:
- gebruik niet de mousedown event om de button te activeren, gebruik liever de click event
- mousedown mag alleen gebruikt worden als mouseup het effect weer ongedaan maakt, bijvoorbeeld een "fast foward" button om audio of video door te spoelen.
WCAG eis 2.5.5: de button moet groot genoeg zijn om aan te klikken, en kleine buttons moeten niet te dicht op een andere button staan.