Badge

Component preview opent in nieuw tabblad

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

Gebruik een badge om aandacht op een element te vestigen en/of om elementen van elkaar te onderscheiden. Ook kan een badge ingezet worden als teller: zodra de teller oploopt wordt de gebruiker visueel daarop gewezen. Een badge bevat een numerieke waarde om een lopende telling of samenvatting aan te geven.

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.

Component in context

Bronvermelding

<!-- Default -->
<dso-badge>Badge tekst</dso-badge>
<!-- Badge Info -->
<dso-badge status="info">Badge tekst</dso-badge>
<!-- Badge Primary -->
<dso-badge status="primary">Badge tekst</dso-badge>
<!-- Badge Success -->
<dso-badge status="success">Badge tekst</dso-badge>
<!-- Badge Warning -->
<dso-badge status="warning">Badge tekst</dso-badge>
<!-- Badge Danger -->
<dso-badge status="danger">Badge tekst</dso-badge>
<!-- Default -->
<span class="dso-badge"><span class="sr-only">Badge: </span>Badge tekst</span>
<!-- Badge Info -->
<span class="dso-badge badge-info"><span class="sr-only">Opmerking: </span>Badge tekst</span>
<!-- Badge Primary -->
<span class="dso-badge badge-primary"><span class="sr-only">Primair: </span>Badge tekst</span>
<!-- Badge Success -->
<span class="dso-badge badge-success"><span class="sr-only">Gelukt: </span>Badge tekst</span>
<!-- Badge Warning -->
<span class="dso-badge badge-warning"><span class="sr-only">Waarschuwing: </span>Badge tekst</span>
<!-- Badge Danger -->
<span class="dso-badge badge-danger"><span class="sr-only">Fout: </span>Badge tekst</span>
<dso-badge {{ attributes([status, 'status', status]) }}>
  {{- label -}}
</dso-badge>
/* Default */
label: Badge tekst
/* Badge Info */
label: Badge tekst
status: info
/* Badge Primary */
label: Badge tekst
status: primary
/* Badge Success */
label: Badge tekst
status: success
/* Badge Warning */
label: Badge tekst
status: warning
/* Badge Danger */
label: Badge tekst
status: danger