Ga naar hoofdinhoud

Badge

Statisch​

Met Toggletip​

De HTML/CSS implementatie is Deprecated.

Een badge geeft de status aan van een systeem. Ook vestigt de badge aandacht op een numerieke waarde of markeert het een element. De badge valt onder de statusmeldingen.

Wanneer te gebruiken​

  • Een badge wordt gebruikt om snel informatie te tonen, zoals het aantal meldingen, de status van een item of een speciale categorie. Badges helpen de aandacht te vestigen op belangrijke updates en onderscheiden elementen van elkaar.
  • De badge is in de basis een statisch component.
  • Als de waarde van een badge niet vanzelfsprekend is, kan een badge interactief worden gemaakt door tooltip inhoud toe te voegen. De badge wordt daarmee interactief (een button) voor het weergeven van de toelichting in een tooltip.
  • Een interactieve badge kent geen disabled state.

Hoe te gebruiken​

Gebruik badges in combinatie met tekst of een ander element om bijvoorbeeld als teller te werken. Gebruik ze dan alleen om een nummer weer te geven, eventueel met speciale tekens voor numerieke waarden zoals + en -. Een tellerbadge wordt niet gebruikt als de waarde 'nul' is, en is dan ook niet te zien.

Een badge heeft geen interactie en is niet klikbaar of te verwijderen. Een badge bestaat uit een label en een achtergrond. Probeer de tekst zo kort mogelijk te houden. Zet er dus geen hele zinnen in. Alleen het eerste woord heeft een hoofdletter. Een badge label kan extra informatie bevatten, zoals een categorie of type badge.

De achtergrond moet samenhangen met de tekst en kan gebruikt worden om een status te benadrukken, te informeren of de status in verband te brengen met informatie.

Gedrag en toegankelijkheid​

  • Gebruikers met een visuele beperking (waaronder kleurenblindheid) zien de kleur van de badge mogelijk niet (goed). Daarom mag de kleur niet van belang zijn om de informatie te begrijpen. Zorg dat de tekst in de badge ook los van de achtergrondkleur volkomen duidelijk is en alle informatie overbrengt. Je kunt in plaats van een 'zichtbaar tekstalternatief' ook een icoontje gebruiken, maar let er dan wel op dat je indien nodig een sr-only tekstalternatief geeft.

Bronvermelding​