Insignes
Documentatie en voorbeelden voor badges, onze kleine telling en etiketteringscomponent.
Voorbeeld
Badges worden geschaald om overeen te komen met de grootte van het direct bovenliggende element door gebruik te maken van relatieve lettergrootte en emeenheden.
Voorbeeld kopNieuw
Voorbeeld kopNieuw
Voorbeeld kopNieuw
Voorbeeld kopNieuw
Voorbeeld kopNieuw
Voorbeeld kopNieuw
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>Badges kunnen worden gebruikt als onderdeel van links of knoppen om een teller te bieden.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Houd er rekening mee dat, afhankelijk van hoe ze worden gebruikt, badges verwarrend kunnen zijn voor gebruikers van schermlezers en vergelijkbare ondersteunende technologieën. Hoewel de vormgeving van badges een visuele indicatie geeft van hun doel, krijgen deze gebruikers gewoon de inhoud van de badge te zien. Afhankelijk van de specifieke situatie kunnen deze badges lijken op willekeurige extra woorden of cijfers aan het einde van een zin, link of knop.
Tenzij de context duidelijk is (zoals bij het voorbeeld 'Meldingen', waarbij duidelijk is dat de '4' het aantal meldingen is), overweeg dan om extra context op te nemen met een visueel verborgen stukje extra tekst.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Contextuele variaties
Voeg een van de onderstaande modificatieklassen toe om het uiterlijk van een badge te wijzigen.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>Betekenis overbrengen aan ondersteunende technologieën
Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (bijv. de zichtbare tekst), of op alternatieve manieren wordt opgenomen, zoals extra tekst die verborgen is bij de .sr-onlyklasse.
Pil badges
Gebruik de .badge-pillmodificatieklasse om badges meer afgerond te maken (met een grotere border-radiusen extra horizontale padding). Handig als je de badges van v3.
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>Links
Het gebruik van de contextuele .badge-*klassen op een <a>element levert snel bruikbare badges op met zweef- en focusstatussen.
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>