Skip to main content

Badge

Documentazione e esempi del componente badge, utile per piccoli contatori e etichette.

La grandezza di ogni badge si adatta come dimensione a quella del font (misurato in unità em) dell’elemento in cui è contenuto.

Titolo di esempio New
Titolo di esempio New
Titolo di esempio New
Titolo di esempio New
Titolo di esempio New
Titolo di esempio New
<h1>Titolo di esempio <span class="badge badge-secondary">New</span></h1>
<h2>Titolo di esempio <span class="badge badge-secondary">New</span></h2>
<h3>Titolo di esempio <span class="badge badge-secondary">New</span></h3>
<h4>Titolo di esempio <span class="badge badge-secondary">New</span></h4>
<h5>Titolo di esempio <span class="badge badge-secondary">New</span></h5>
<h6>Titolo di esempio <span class="badge badge-secondary">New</span></h6>

I badge possono essere utilizzati come parte di link o pulsanti per fornire un contatore.

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

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.

<button type="button" class="btn btn-primary">
  Profilo <span class="badge badge-light">9</span>
  <span class="sr-only">Messaggi non letti</span>
</button>

Variazioni contestuali

Aggiungi una delle seguenti classi per modificare l’aspetto di un badge.

Primary Secondary Success Danger Warning
<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>

Trasmettere significato alle tecnologie assistive

L’uso del colore per aggiungere un significato fornisce solo un’indicazione visiva, che non sarà trasmesso agli utenti di tecnologie assistive – come gli screen reader. Assicurati che le informazioni denotate dal colore siano rese disponibili anche dal contenuto stesso (es.: il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la classe .sr-only.

Badges arrotondati

Per rendere i badge arrotondati puoi usare la classe .badge-pill.

Primary Secondary Success Danger Warning
<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>

Se hai bisogno che un badge sia anche un link, aggiungi una delle classi contestuali .badge-* sull’elemento <a>. Di conseguenza anche gli stati hover e focus saranno attivi sul badge.

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

Questo sito utilizza cookie tecnici, analytics e di terze parti.
Proseguendo nella navigazione accetti l’utilizzo dei cookie.

Privacy policy