Bootstrap 5.2 / Componenten

Badges

Documentatie en voorbeelden voor badges, ons kleine component voor tellers en labels.

Voorbeelden

Badges schalen mee met het formaat van het direct bovenliggende element door relatieve lettergroottes en em-eenheden te gebruiken. Sinds v5 hebben badges geen focus- of hover-stijlen meer voor links.

Koppen

HTML

<h1>Voorbeeldkop <span class="badge bg-secondary">Nieuw</span></h1>
<h2>Voorbeeldkop <span class="badge bg-secondary">Nieuw</span></h2>
<h3>Voorbeeldkop <span class="badge bg-secondary">Nieuw</span></h3>
<h4>Voorbeeldkop <span class="badge bg-secondary">Nieuw</span></h4>
<h5>Voorbeeldkop <span class="badge bg-secondary">Nieuw</span></h5>
<h6>Voorbeeldkop <span class="badge bg-secondary">Nieuw</span></h6>

Knoppen

Badges kunnen als onderdeel van links of knoppen worden gebruikt om een teller te tonen.

HTML

<button type="button" class="btn btn-primary">
  Meldingen <span class="badge text-bg-secondary">4</span>
</button>

Let op: afhankelijk van hoe ze gebruikt worden, kunnen badges verwarrend zijn voor gebruikers van schermlezers en vergelijkbare hulptechnologieën. Waar de styling van badges visueel duidelijk maakt wat hun doel is, krijgen deze gebruikers simpelweg de inhoud van de badge te horen. Afhankelijk van de situatie kunnen deze badges overkomen als willekeurige extra woorden of getallen aan het eind van een zin, link of knop.

Tenzij de context duidelijk is (zoals bij het voorbeeld "Meldingen", waar het duidelijk is dat de "4" het aantal meldingen is), overweeg dan extra context toe te voegen met een stukje visueel verborgen tekst.

Gepositioneerd

Gebruik utilities om een .badge aan te passen en hem in de hoek van een link of knop te positioneren.

HTML

<button type="button" class="btn btn-primary position-relative">
  Postvak IN
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">ongelezen berichten</span>
  </span>
</button>

Je kunt de klasse .badge ook vervangen door een paar extra utilities zonder teller, voor een algemenere indicator.

HTML

<button type="button" class="btn btn-primary position-relative">
  Profiel
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">Nieuwe meldingen</span>
  </span>
</button>

Achtergrondkleuren

Nieuw in v5.2.0

Stel een background-color met een contrasterende voorgrond-color in met onze .text-bg-{color}-helpers. Voorheen moest je je keuze uit de .text-{color}- en .bg-{color}-utilities handmatig combineren voor de styling; dat kun je nog steeds doen als je dat liever hebt.

HTML

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

Let op

Gebruik kleur niet als enige manier om iets duidelijk te maken. Zorg voor extra aanwijzingen (tekst, een icoon, een ander contrast), zodat mensen die kleuren niet of anders waarnemen de informatie ook krijgen.

Pill-badges

Gebruik de utility-klasse .rounded-pill om badges ronder te maken met een grotere border-radius.

HTML

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken badges nu lokale CSS-variabelen op .badge, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Standaardwaarden: zie scss/_badge.scss in de Bootstrap-broncode.

Sass-variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.