Badges

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

På denne side

Eksempler

Badges skaleres til at matche størrelsen af det umiddelbare overordnede element ved at bruge relativ skriftstørrelse og emenheder. Fra v5 har badges ikke længere fokus eller svævestile til links.

Overskrifter

Eksempel overskrift Ny

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

Knapper

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 bg-secondary">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.

Placeret

Brug hjælpeprogrammer til at ændre en .badgeog placere den i hjørnet af et link eller en knap.

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

Du kan også erstatte .badgeklassen med et par flere hjælpeprogrammer uden at tælle en mere generisk indikator.

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

Baggrundsfarver

Brug vores baggrundsværktøjsklasser til hurtigt at ændre udseendet af et badge. Bemærk venligst, at når du bruger Bootstraps standard .bg-light, har du sandsynligvis brug for et tekstfarveværktøj som .text-darkfor korrekt styling. Dette skyldes, at baggrundsværktøjer ikke indstiller andet end background-color.

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

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-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 oplysninger, 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 .visually-hiddenklassen.

Pillemærker

Brug .rounded-pillhjælpeklassen til at gøre badges mere afrundede med en større border-radius.

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

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

Sass

Variabler

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;