Badges

Dokumentation og eksempler til badges, vores lille tæller og mærkningskomponent.

Eksempel

Badges skaleres til at matche størrelsen af det umiddelbare overordnede element ved at bruge relativ skriftstørrelse og emenheder.

Eksempel overskriftNy

<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 kan bruges som en del af links eller knapper til at give en tæller.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Bemærk, at afhængigt af hvordan de bruges, kan badges være forvirrende for brugere af skærmlæsere og lignende hjælpeteknologier. Mens stylingen af badges giver et visuelt fingerpeg om deres formål, vil disse brugere blot blive præsenteret for indholdet af badget. Afhængigt af den specifikke situation kan disse badges virke som tilfældige ekstra ord eller tal i slutningen af en sætning, et link eller en knap.

Medmindre konteksten er klar (som med eksemplet "Notifikationer", hvor det forstås, at "4" er antallet af notifikationer), skal du overveje at inkludere yderligere kontekst med et visuelt skjult stykke ekstra tekst.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Kontekstuelle variationer

Tilføj en af de nedenfor nævnte modifikationsklasser for at ændre udseendet af et badge.

Primær Sekundær Succes Fare Advarsel Info Lys Mørk

<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>

Formidle mening til hjælpeteknologier

Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at informationer, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .sr-onlyklassen.

Pillemærker

Brug .badge-pillmodifikationsklassen til at gøre badges mere afrundede (med en større border-radiusog yderligere vandret padding). Nyttigt, hvis du savner badges fra v3.

Primær Sekundær Succes Fare Advarsel Info Lys Mørk

<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

Brug af de kontekstuelle .badge-*klasser på et <a>element giver hurtigt brugbare badges med svæve- og fokustilstande.

Primær Sekundær Succes Fare Advarsel Info Lys Mørk

<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>