Knoppen

Buttons zijn er in verschijningsvormen en kunnen verschillende functies hebben. Op deze pagina staat het overzicht van alle verschillende button-varianten.

Toelichting:

Snelstart

  1. Bepaal welk type html-element geschikt is. Zie Beschikbare types voor meer informatie.
  2. Bepaal aan de hand van de toelichting en de situatie welke variant en welke visuele weergave past.
  3. Kopiëer de voorbeeldcode.

Beschikbare types

Knoppen kunnen op verschillende manieren opgebouwd worden. Iets wat er visueel als een knop uit ziet kan in de html prima een link zijn. Welk html-element geschikt is hangt af van de situatie. In deze documentatie zetten we de verschillen met situatieschetsen uiteen.

Aandachtspunten:

  • Kies altijd voor het semantisch correcte html-element. Bijvoorbeeld een <a> voor een link en een <button> voor een knop. Het gebruik maken van semantisch correcte html-elementen zorgt ervoor dat gebruikers die door middel van hulptechnologiën navigeren ook de correcte informatie krijgen. In de onderstaande tabel staan enkele veelvoorkomende voorbeelden.
Overzicht van type buttons met situatieschetsen
Situatie <button> <input> <a>
Submitknop binnen een formulier Correct Correct Incorrect
Resetknop binnen een formulier Correct Correct Incorrect
Login-knop naar login-pagina Incorrect Incorrect Correct
Actieknop, bijvoorbeeld een actie binnen een tabel Correct Incorrect Incorrect
Actieknop met een link naar een ander deel van de site Incorrect Incorrect Correct
Legenda
Semantisch correct en het gewenste html-element voor hulptechnologiën. Semantisch correct maar geeft problemen voor bepaalde gebruikersgroepen. Semantisch incorrect.

Waarschuwing:Hoewel bijvoorbeeld een <span> en een <div> visueel vormgegeven kunnen worden als een knop, en met behulp van bijvoorbeeld Javascript zich ook kunnen gedragen als een knop. Is het semantisch incorrect om deze html-elementen hiervoor te gebruiken. Gebruik in plaats hiervan een: <button>, <a> of <input>.

Button

Knoppen die een actie uitlokken en niet naar een ander deel van de website verwijzen horen binnen de html als <button> toegevoegd te worden.

Aandachtspunten:

button

Visueel voorbeeld:

Html-voorbeeld:

                        
<button>Lorem ipsum</button>
<button disabled>button primary</button>

button type="button"

Visueel voorbeeld:

Html-voorbeeld:

                        
<button type="reset">Button primary</button>
<button type="reset" disabled>Button disabled</button>

button type="submit"

Visueel voorbeeld:

Html-voorbeeld:

                        
<button type="submit">Lorem ipsum</button>
<button type="submit" disabled>Lorem ipsum</button>

button type="reset"

Visueel voorbeeld:

Html-voorbeeld:

                        
<button type="reset">Button primary</button>
<button type="reset" disabled>Button disabled</button>

Input

Een input kan van het type button zijn en als knop gebruikt worden.

Aandachtspunten:

  • Een input kan als html-element geen content bevatten. Voor meer vrijheid met betrekking tot content wordt het aangeraden gebruik te maken van <button.
  • <input>'s kunnen van verschillende types zijn.
    • submit: Verstuurd de huidige formulierdata.
    • reset: Zet de bedieningselementen terug naar de initiële waarde.
    • button: Deze type heeft geen standaard gedrag.
    Lees meer over knoppen in de MDN-documentatie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Input type="button"

Visueel voorbeeld:

Html-voorbeeld:

                        
<input type="button" value="Lorem ipsum">
<input type="button" value="Lorem ipsum" disabled>

Input type="submit"

Visueel voorbeeld:

Input type = submit <input type="submit">:

Html-voorbeeld:

                        
<input type="submit" value="Input">
<input type="submit" value="Input disabled" disabled>

Input type="reset"

Visueel voorbeeld:

Html-voorbeeld:

                        
<input type="reset" value="Input">
<input type="reset" value="Input disabled" disabled>

Visuele weergave

Knoppen kunnen op basis van context en ten behoeve van gebruikersgemak qua vormgeving anders weergegeven worden.

Aandachtspunten:

  • Zorg voor consistentie, pas enkel alteratieve weergave toe als het de gebruiker helpt bij het begrijpen en gebruiken van de site.
  • Breng waar mogelijk, en waar het gebruikersgemak ten goede komt onderscheid aan in de belangrijkheid van knoppen. Hiermee begeleid je de gebruiker zonder opties uit het proces weg te nemen. Denk bijvoorbeeld aan een "Wijzigen" en "Opslaan" knoppen. "Opslaan" zal voor veel gebruikers de benodigde actie zijn, terwijl sommige gebruikers nog even terug willen om wijzigingen aan te brengen. In dat geval is het verstandig om de knop "Opslaan" als primaire-knop weer te geven en de knop "Wijzigen" visueel ondergeschikt maken. Zie voor meer informatie Secundaire button.

Beschikbare visuele weergaven:

Primaire button

Dit is een button met een kleurvlak. Hierdoor valt de button goed op. Dit is de button die standaard gebruikt wordt.

Visueel voorbeeld:

Link

Visueel voorbeeld van uitgeschakelde primaire knoppen:

Html-vooreeld:

                        
<!-- Voorbeeldknoppen verschillende types -->

<button>Button</button>
<input type="button" value="Input type button">
<a href="/" class="button">Link</a>

<!-- Voorbeeldknoppen uitgeschakelde weergave -->

<button disabled>Button</button>
<input type="button" value="Input type button" disabled>

Secundaire button

Soms is het qua gebruikerservaring prettiger om een minder opvallende knop gebruiken. Bijvoorbeeld: als er een keuze gegeven wordt met twee of meer knoppen waarbij een knop de voorkeur heeft, of vaak gekozen wordt. Denk bijvoorbeeld aan een verder of annuleren knop. Dan helpt het de gebruiker om de extra keuzemogelijkheden visueel minder zwaar te maken. De lichtere button-variant is hier geschikt voor.

Aandachtspunten:

  • Om gebruik te maken van de secondaire styling voor knoppen, voeg de class ghost toe.

Visueel voorbeeld:

Link

Visueel voorbeeld van uitgeschakelde primaire knoppen:

Html-voorbeeld:

                        
<!-- Voorbeeldknoppen verschillende types -->

<button class="ghost">Button</button>
<input type="button" value="Input type button" class="ghost">
<a href="/" class="button ghost">Link</a>

<!-- Voorbeeldknoppen uitgeschakelde weergave -->

<button class="ghost" disabled>Button</button>
<input type="button" value="Input type button" class="ghost" disabled>

CTA-knop (oproep tot actie)

Knoppen die oproepen tot actie kunnen in een alternatieve kleur getoond kunnen worden. De afwijkende kleur zorgt ervoor dat de knop meer opvalt en daardoor meer aandacht van gebruikers krijgt.

Aandachtspunten:

  • Gebruik de knop spaarzaam om het effect te behouden.
  • Om gebruik te maken van de "oproep tot actie"-styling voor knoppen, voeg de class cta toe.

Visueel voorbeeld:

Link

Visueel voorbeeld van uitgeschakelde primaire knoppen:

Html-voorbeeld:

                        
<!-- Voorbeeldknoppen verschillende types -->

<button class="cta">Button</button>
<input type="button" value="Input type button" class="cta">
<a href="/" class="button cta">Link</a>

<!-- Voorbeeldknoppen uitgeschakelde weergave -->

<button class="cta" disabled>Button</button>
<input type="button" value="Input type button" class="cta" disabled>

Icoonknoppen

Voor ondersteunende knoppen. Denk bijvoorbeeld aan een informatie- of help-knop.

Aandachtspunten:

  • Zorg er bij het toevoegen van een icoonknop voor dat het html-element semantisch correct is. Vaak zal dit voor een icoonknop een <button> zijn.
  • Voeg de class icon toe om een button als icoonbutton weer te geven.
  • Voeg de class van het gewenste icoon toe. Zie de lijst met iconen ter referentie van alle beschikbare iconen.
  • <input>-element kan niet gebruikt worden als icoonknop aangezien deze geen pseudo-elementen kan bevatten.
  • Let op: Icoonknoppen tonen standaard geen tekst. Voeg de knoptekst wel altijd toe voor onder anderen screenreader gebruikers. Icoon en tekst tonen? Zie: Icoonknoppen met zowel icoon en tekst zichtbaar

Visueel voorbeeld:

Html-voorbeeld:

                        
<button class="icon icon-questionmark">Help</button>

Visueel voorbeeld secundaire knop:

Html-voorbeeld:

                        
<button class="icon icon-questionmark ghost">Help</button>

Icoonknoppen met zowel icoon en tekst zichtbaar

In sommige gevallen kan het wenselijk zijn om naast het icoon ook de tekst weer te geven. Bijvoorbeeld bij iconen die minder herkenbaar zijn voor gebruikers.

Aandachtspunten:

  • <input>-element kan niet gebruikt worden als icoonknop aangezien deze geen pseudo-elementen kan bevatten.
  • Voeg een span met het gewenste icoon toe binnen de button.
    1. Voeg de <span> toe.
    2. Voeg op de span de class icon toe.
    3. Voeg de class van het gewenste icoon toe. Zie de lijst met iconen ter referentie van alle beschikbare iconen.
  • Verberg de span voor screenreader-gebruikers als het icoon enkel decoratief is en de tekst op de knop de informatie al volledig overbrengt om dubbeling te voorkomen. Voeg hiervoor aria-hidden="true" toe aan de <span>. Voeg een omschrijvende tekst toe binnen de <span> als het icoon informatie toevoegt die anders verloren gaat voor hulptechnologie-gebruikers.

Visueel voorbeeld:

Html-voorbeeld:

                        
<button><span aria-hidden="true" class="icon icon-questionmark"></span>Help</button>

Visueel voorbeeld secundaire knop:

Html-voorbeeld:

                        
<button class="ghost"><span aria-hidden="true" class="icon icon-questionmark"></span>Help</button>

Actieknoppen

Gebruik actieknoppen op plekken waar de knop vaak herhaalt wordt en getoont kan worden met een herkenbaar icoon. Denk bijvoorbeeld aan acties binnen een formulier.

Aandachtspunten:

  • Ga er niet vanuit dat de gebruiker weet wat het icoon betekend. Plaats de omschrijvende tekst in de header.
  • Voor toegankelijkheid is het belangrijk om de tekst wel toe te voegen aan de button ook al wordt deze visueel niet getoont. Screenreaders maken hier bijvoorbeeld gebruik van.
  • Voor tabellen met lange lijsten kan het de gebruiker helpen om gebruik te maken van de tabel met sticky header zodat de toelichting van de iconen altijd in beeld blijft. Zie de documentatie hierover op de tabellen pagina tabel met sticky header.
  • Om gebruik te maken van de visuele actieknop weergave, voeg de class action-button toe aan de button.
  • Als alle knoppen binnen een tabel weergegeven mogen worden als actieknop kan er ook gebruik gemaakt worden van de class action-buttons direct op de <table>. Let op: Alle knoppen worden in dat geval weergegeven als actieknoppen.

Visueel voorbeeld:

Tabelvoorbeeld met actieknoppen:
Gebruikersnaam Bekijk profiel Wijzig wachtwoord Deactiveer Verwijder
Jane doe

Html-voorbeeld:

                        
<table>
  <caption>Tabelvoorbeeld met actieknoppen:</caption>

  <thead>
    <tr>
      <th>Gebruikersnaam</th>
      <th>Bekijk profiel</th>
      <th>Wijzig wachtwoord</th>
      <th>Deactiveer</th>
      <th>Verwijder</th>
    </tr>
  </thead>

  <tbody>
    <tr>
        <td>Jane doe</td>
        <td>
            <form>
                <button type="submit" class="icon icon-user action-button">Bekijk profiel</button>
            </form>
        </td>
        <td>
            <form>
                <button type="submit" class="icon icon-lock-closed action-button">Wijzig wachtwoord</button>
            </form>
        </td>
        <td>
            <form>
                <button type="submit" class="icon icon-on-off action-button">Deactiveer</button>
            </form>
        </td>
        <td>
            <form>
                <button type="submit" class="icon icon-trash action-button">Verwijder</button>
            </form>
        </td>
    </tr>
  </tbody>

</table>

Visueel voorbeeld:

Tabelvoorbeeld met actieknoppen gedefinieerd op de tabel:
Gebruikersnaam Bekijk profiel Wijzig wachtwoord Deactiveer Verwijder
Jane doe

Html-voorbeeld:

                        
<table class="action-buttons">
    <caption>Tabelvoorbeeld met actieknoppen gedefinieerd op de tabel:</caption>

    <thead>
        <tr>
          <th>Gebruikersnaam</th>
          <th>Bekijk profiel</th>
          <th>Wijzig wachtwoord</th>
          <th>Deactiveer</th>
          <th>Verwijder</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Jane doe</td>
            <td>
                <form>
                    <button type="submit" class="icon icon-user">Bekijk profiel</button>
                </form>
            </td>
            <td>
                <form>
                    <button type="submit" class="icon icon-lock-closed">Wijzig wachtwoord</button>
                </form>
            </td>
            <td>
                <form>
                    <button type="submit" class="icon icon-on-off">Deactiveer</button>
                </form>
            </td>
            <td>
                <form>
                    <button type="submit" class="icon icon-trash">Verwijder</button>
                </form>
            </td>
        </tr>
    </tbody>

</table>

Knoppen groeperen

Knoppen kunnen gegroepeerd worden, waar mogelijk worden de knoppen in dat geval naast elkaar gepositioneerd.

Aandachtspunten:

  • Groepeer de knoppen binnen een <div> met de class button-container.

Visueel voorbeeld:

Html-voorbeeld:

                        
<div class="button-container">
    <button>Eerste knop</button>
    <button>Tweede knop</button>
</div>
Terug naar het hoofdmenu