Märken

Dokumentation och exempel för märken, vår lilla räkning och märkningskomponent.

Exempel

Märken skalas för att matcha storleken på det omedelbara överordnade elementet genom att använda relativ teckenstorlek och emenheter.

ExempelrubrikNy

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

Märken kan användas som en del av länkar eller knappar för att ge en räknare.

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

Observera att märken, beroende på hur de används, kan vara förvirrande för användare av skärmläsare och liknande hjälpmedel. Medan designen av märken ger en visuell fingervisning om deras syfte, kommer dessa användare helt enkelt att presenteras med märkets innehåll. Beroende på den specifika situationen kan dessa märken verka som slumpmässiga ytterligare ord eller siffror i slutet av en mening, länk eller knapp.

Om inte sammanhanget är tydligt (som med exemplet "Notifikationer", där det är underförstått att "4" är antalet aviseringar), överväg att inkludera ytterligare sammanhang med en visuellt dold del av ytterligare text.

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

Kontextuella variationer

Lägg till någon av nedan nämnda modifieringsklasser för att ändra utseendet på ett märke.

Primär Sekundär Framgång Fara Varning Info Ljus 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>

Förmedla mening till hjälpmedel

Att använda färg för att lägga till mening ger bara en visuell indikation som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (t.ex. den synliga texten), eller är inkluderad på andra sätt, såsom ytterligare text gömd med .sr-onlyklassen.

Pill-märken

Använd .badge-pillmodifieringsklassen för att göra märken mer rundade (med en större border-radiusoch extra horisontell padding). Användbart om du missar märkena från v3.

Primär Sekundär Framgång Fara Varning Info Ljus 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>

Länkar

Att använda de kontextuella .badge-*klasserna på ett <a>element ger snabbt handlingsbara märken med hovring och fokustillstånd.

Primär Sekundär Framgång Fara Varning Info Ljus 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>