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.

Cabeçalho exemplo Novo
Cabeçalho exemplo Novo
Cabeçalho exemplo Novo
Cabeçalho exemplo Novo
Cabeçalho exemplo Novo
Cabeçalho exemplo Novo
<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.

Primary Secondary Success Danger Warning Info Light Dark
<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.

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

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>