Badges

Sådan bruges komponenten

Anvendes til

Brug badges til at gøre opmærksom på ændringer, nyt eller vigtigt indhold.

Anvendes ikke til

Brug ikke badge, hvis placeringen af det får brugeren til at tro, det er en knap. Test altid for dette, når du vil anvende badges.

Brug ikke badges på sider, hvor indholdet bliver udskiftet dynamisk. Fx på nyhedssider, hvor brugeren nemt kan se, hvad der er det nyeste indhold, når det blot står øverst.

Vejledning

Brug ord og begreber, som brugeren kan genkendes fra løsningen.

Brug ikke hover, focus eller active styling til et badge, som ikke er interaktivt (fx link).

Bland aldrig interaktive og statiske badges i samme løsning. Brugerne forventer ensartet opførsel af komponenterne inden for løsningen.

Vær varsom med at markere for meget indhold med badges – brug dem kun, hvor det virkelig er meningsfuldt.

Varianter

Statusbadges

Se komponenten i eksempelløsninger

• Sagsoversigt: Find sag
• Sagsoversigt: Sagsnr. 123456789
• Sagsoversigt: Afgørelser
• Opgaveliste

Referencer

Natasha Postolovski: What Is The Most Underrated Word In Web Design? (2014)

Installation

HTML Struktur

<div class="mb-3">
    <span class="badge badge-large">Stort badge</span>
</div>
<div class="mb-3">
    <span class="badge badge-small">Lille badge</span>
</div>

Alle badges skal have en badge klasse på <span>-elementet.

Hvis et badge anvendes til særlig fræmhævning af et ord i en kontekst, for eksempel når nyt indhold markeres på en side, anvend da et <strong>-element i stedet for <span>.

Tilgængelighed

Interaktive badges bliver automatisk markeret, når brugere ved hjælp af tastaturet navigerer sig frem til dem.

Du skal anvende ARIA live regions til at gøre skærmlæsere opmærksomme på ændringerne, hvis du anvender badges dynamisk i løsningen til at gøre opmærksom på nyt indlæst indhold eller ændringer på siden.

Stort badge

For et stort badge skal der tilføjes en badge-large class.

Lille badge

For et lille badge skal der tilføjes en badge-small class.

Statusbadges

Statusbadges har 4 forskellige farver og formål:

• Grøn, som er succesfarven og implementeres med klassen badge-success.
• Blå, som er informationsfarven og implementeres med klassen badge-info.
• Gul, som er advarselsfarven og implementeres med klassen badge-warning.
• Rød, som er fejlfarven og implementeres med klassen badge-error.

Se eksempel på anvendelse af statusbadges i vores release notes.