Badges
Documentação e exemplos sobre os badges, nosso pequeno componente para contagem e rótulos.
Exemplo
Os badges escalam para combinar com o tamanho do elemento pai imediato, usando font-size relativa e unidade em.
<h1>Cabeçalho exemplo <span class="badge badge-secondary">Novo</span></h1>
<h2>Cabeçalho exemplo <span class="badge badge-secondary">Novo</span></h2>
<h3>Cabeçalho exemplo <span class="badge badge-secondary">Novo</span></h3>
<h4>Cabeçalho exemplo <span class="badge badge-secondary">Novo</span></h4>
<h5>Cabeçalho exemplo <span class="badge badge-secondary">Novo</span></h5>
<h6>Cabeçalho exemplo <span class="badge badge-secondary">Novo</span></h6>Badges podem ser usados como parte de links ou botões para realizar contagem.
<button type="button" class="btn btn-primary">
Notificações <span class="badge badge-light">4</span>
</button>Perceba que dependendo do uso, badges podem ser confusos para usuários de leitores de telas e tecnologias assistivas similares. Apesar do estilo dos badges serem intuitivos, esses usuários vão ser apresentados só ao conteúdo contido neles. Por isso, dependendo da situação, esses badges podem parecer palavras ou números quaisquer ao final da frase, link ou botão.
A não ser que o contexto esteja claro (como no exemplo “Notificações”, onde é entendido que o 4 é o número de notificações), considere criar contexto com um texto adicional escondido visualmente.
<button type="button" class="btn btn-primary">
Perfil <span class="badge badge-light">9</span>
<span class="sr-only">Mensagens não lidas</span>
</button>Variações contextuais
Adicione qualquer uma das classes modificadoras mencionadas abaixo para mudar a aparência de um badge.
<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>Transmitindo significado a tecnologias assistivas
Usando cor para adicionar significado só fornece uma indicação visual, a qual não será transmitida para usuários de tecnologias assistivas (como leitores de telas). Se assegure que a informação denotada pela cor é tanto destacada do conteúdo (ex: o texto visível) ou está incluída em meios alternativos, como textos extras escondidos com a classe .sr-class.
Badges em pílulas
Use a classe modificadora .badge-pill para fazer com que os badges fiquem mais arredondados (border-radius maior e padding horizontal adicional). É útil se você precisa dos badges da v3.
<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>Links
Usando as classes contextuais .badge-*, em um elemento <a>, rapidamente, consiga badges acionáveis com estados hover e focus.
<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>