Componenten

Knoppen

Knoppen worden gebruikt om acties uit te voeren. Er kan onderscheid gemaakt worden tussen primaire acties en secundaire acties. Wanneer er maar één actie op een pagina is dan wordt altijd de primaire knop gebruikt, wanneer er meerdere acties zijn dan kan de secundaire knop toegepast worden.

Richtlijnen

  • De class .btn mag worden toegepast op elementen a, button en input type="button". Technisch is het mogelijk de classes op andere type elementen te gebruiken, maar dit is niet toegestaan omdat bijkomend gedrag van knoppen en links dan niet ondersteund worden door de browser.
  • Let er op dat knoppen altijd een actie beschrijven en niet (te) generiek zijn. Gebruik bijvoorbeeld 'Aanvraag verzenden' en niet het label 'OK'.
  • Knoppen mogen niet disabled zijn. Als een knop op het scherm wordt getoond dan moet hij een functie hebben. Wanneer er iets geladen wordt na het klikken op een knop dan moet wel voorkomen worden dat een formulier meerdere keren verstuurd wordt en mag een knop tijdelijk disabled worden. Visueel is er dan geen verschil zichtbaar.

Toegankelijkheid

  • De classes voor de knoppen kunnen worden gebruikt op zowel a- als button-elementen. Afhankelijk van de functie van de knop bepaal je welk type element je gebruikt. In principe gebruik je een a-element wanneer de knop bedoeld is voor navigatie, en een button-element wanneer de knop een formulier verzendt of interacties uitvoert waarbij je op dezelfde pagina blijft.
  • Wordt de functionele werking van de knop deels bepaald door de context op de pagina, dan is het nodig om een aria-label toe te voegen of een tekst met de class visually-hidden te gebruiken voor extra verduidelijking. Bijvoorbeeld bij een 'Wijzigen'-link naast de koptekst van een sectie.

Opbouw classes

  • Alle knoppen hebben een basis class btn.
  • De kleur van de knop wordt specifiek gemaakt door de classes btn-primary, btn-secondary en btn-danger.
  • Voor de variaties op de knoppen worden aanvullende classes btn-ghost en btn-link gebruikt.

Knoptypes

Voor de primaire actie op de pagina wordt een gevulde knop gebruikt in de primaire kleur. Bijvoorbeeld een 'versturen' knop in een stepper of een 'zoeken' knop in een zoekscherm. De meeste opvallende knop wordt hiermee herkenbaar voor de gebruiker en is de call to action knop.

Wanneer er naast de primaire knop een knop getoond wordt, dan is dit meestal een link-knop. Dit is vaak functioneel de tegenhanger van de primaire knop. Bijvoorbeeld: een 'annuleren' knop naast een 'opslaan', of een 'terug naar vorige stap' knop naar de primaire 'naar volgende stap' knop.

Afhankelijk van de context van een link-button kan het nodig zijn om deze weer te geven als onderstreept, zodat deze beter herkenbaar is als interactief element. Hiervoor kun je de class `btn-link--underline` toevoegen.

Soms zijn er meerdere knoppen op één pagina met acties. Maak dan onderscheid tussen de primaire (meest gebruikte) actie en de secundaire actie(s) door deze laatste de secundaire kleur te geven of gebruik een ghost knop. Welke je gebruik is context afhankelijk.

Knoppen met iconen

Er zijn een aantal standaard classes beschikbaar die een icoon in de knop tonen. Deze classes kunnen met de verschillende knoptypes gecombineerd worden.

De volgende knoppen met iconen zijn aanwezig in de huisstijl. In het voorbeeld hebben de knoppen de stijl (filled, link, ghost en de kleuren) waarin zij het meest voorkomen, maar andere combinaties zijn ook mogelijk.

Icoon class Voorbeeld
btn-approve Goedkeuren
btn-reject Afwijzen
btn-refresh Vernieuwen
btn-add Toevoegen
btn-edit Wijzigen
btn-remove Verwijderen
btn-download Download bevestiging
btn-document Bekijk document
btn-previous Vorige
btn-next Volgende

Knoppen in tabellen

Met name in back-office applicaties komt het voor dat er op tabelregels knoppen staan. De volledige knoppen nemen dan te veel ruimte in. In dat geval kan de class btn-inline worden toegevoegd, zodat de padding beperkt wordt. Hierdoor behouden de regels met knoppen dezelfde hoogte als reguliere tabelregels.

Backward compatibility voor back-office applicaties

In een eerdere versie van het CIBG Design System waren een aantal knoppen specifiek bestemd voor back-office applicaties. De meeste van deze knoppen zijn inmiddels gepromoveerd tot gebruik in alle applicatietypes.

De enige knop die voorbehouden is voor back-office applicaties is de groene 'goedkeuren' knop. Het gebruik hiervan wordt niet gestimuleerd, maar omwille van compatibiliteit met terugwerkende kracht is deze nog aanwezig.