Vai al contenuto principale

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA
Cerca nella documentazione

Badge

Badge

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

Variazioni contestuali

La dimensione e il carattere di ogni badge si adattano automaticamente a quelli dell’elemento che lo contiene.

Titolo di esempio h1New
Titolo di esempio h2New
Titolo di esempio h3New
Titolo di esempio h4New
Titolo di esempio h5New
Titolo di esempio h6New

1
2
3
4
5
6

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

I badge possono essere utilizzati come contatori all’interno di link o pulsanti. Per questi casi, si consiglia di utilizzare la classe .badge-sm che riduce la spaziatura laterale interna.

1
2
3

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

Accessibilità

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.

1
2
3
4

<button type="button" class="btn btn-primary">
Profilo <span class="badge badge-sm badge-inverse text-primary">9</span>
<span class="visually-hidden">Messaggi non letti</span>
</button>

Variazioni colore

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

Primary Secondary Success Danger Warning 

1
2
3
4
5

<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 .visually-hidden.

Le varianti di colore corrispondono agli stessi status disponibili per il componente alert.

Badges arrotondati

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

Primary Secondary Success Danger Warning 

1
2
3
4
5

<span class="badge rounded-pill badge-primary">Primary</span>
<span class="badge rounded-pill badge-secondary">Secondary</span>
<span class="badge rounded-pill badge-success">Success</span>
<span class="badge rounded-pill badge-danger">Danger</span>
<span class="badge rounded-pill badge-warning">Warning</span>

Se hai bisogno di trasformare un badge in un link, aggiungi una delle classi contestuali .badge-* all’elemento . In questo modo, il badge risponderà agli stati hover e focus.

Primary Secondary Success Danger Warning 

1
2
3
4
5

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

Properties

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-badge-border-radius Controls the border radius for the badge, using radius tokens. var(--bsi-radius-smooth)
--bsi-badge-font-size Controls the font size for the badge, using font tokens. var(--bsi-label-font-size-s)
--bsi-badge-font-size-relative Controls the relative font size for the badge. 0.75em
--bsi-badge-font-weight Controls the font weight for the badge, using font tokens. var(--bsi-font-weight-solid)
--bsi-badge-padding-x Controls the horizontal padding for the badge, using spacing tokens. var(--bsi-spacing-xs)
--bsi-badge-padding-y Controls the vertical padding for the badge, using spacing tokens. var(--bsi-spacing-3xs)
--bsi-badge-text-color Controls the text color for the badge, using color tokens. var(--bsi-color-text-inverse)

Breaking change

  • Le classi che controllano il colore diventano specifiche per il componente e hanno cambiato nome, ad esempio le classi .bg-secondary e .bg-white diventano .badge-secondary e .badge-inverse.
  • Viene definita la classe .badge-sm per l’uso mirato all’intero di pulsanti.