Badge
Il componente badge è utile per piccoli contatori e etichette.
Esempio
Titolo di esempio New
Titolo di esempio New
Titolo di esempio New
<h1>Titolo di esempio <span class="badge bg-primary">New</span></h1>
<h3>Titolo di esempio <span class="badge bg-secondary">New</span></h3>
<h5>Titolo di esempio <span class="badge bg-secondary">New</span></h5>Come contatore
I badge possono essere utilizzati come parte di link o pulsanti per fornire un contatore.
A seconda di come i badge vengono utilizzati, questi potrebbero confondere gli utenti che usano lo screen reader e tecnologie assistive simili. Mentre lo stile dei badge fornisce un indizio visivo sul loro scopo, a questi utenti saranno semplicemente presentati come semplice contenuto. A seconda della situazione specifica, questi badge possono sembrare parole o numeri aggiuntivi casuali alla fine di una frase, un collegamento o un pulsante.
A meno che il contesto non sia chiaro (come con l’esempio “Notifiche”, dove si capisce che il “4” è il numero di notifiche), considera l’eventualità di includere un testo aggiuntivo nascosto con la classe .visually-hidden.
La classe visually-hidden sostituisce in Bootstrap5 la classe sr-only.
Il tema garantisce compatibilità all'indietro, renderizzando sr-only - se ancora presente - in maniera analoga a visually-hidden
<button type="button" class="btn btn-primary">
Notifiche <span class="badge neutral-2-bg text-secondary">4</span>
<span class="visually-hidden">Messaggi non letti</span>
</button>
Link e Badge arrotondati
Se hai bisogno che un badge sia anche un link, aggiungi una delle classi contestuali .badge-* sull’elemento. Di conseguenza anche gli stati hover e focus saranno attivi sul badge.
Se preferisci i badge minimali e arrotondati puoi usare la classe .badge-pill
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>