Distintivos

Documentação e exemplos de crachás, nosso componente de pequena contagem e rotulagem.

Exemplo

Os emblemas são dimensionados para corresponder ao tamanho do elemento pai imediato usando o tamanho e emas unidades de fonte relativos.

Exemplo de títuloNovo

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Os crachás podem ser usados como parte de links ou botões para fornecer um contador.

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

Observe que, dependendo de como são usados, os crachás podem ser confusos para usuários de leitores de tela e tecnologias assistivas semelhantes. Embora o estilo dos crachás forneça uma dica visual quanto ao seu propósito, esses usuários simplesmente verão o conteúdo do crachá. Dependendo da situação específica, esses emblemas podem parecer palavras ou números adicionais aleatórios no final de uma frase, link ou botão.

A menos que o contexto seja claro (como no exemplo "Notificações", onde se entende que "4" é o número de notificações), considere incluir contexto adicional com um pedaço de texto adicional visualmente oculto.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Variações contextuais

Adicione qualquer uma das classes modificadoras mencionadas abaixo para alterar a aparência de um emblema.

Primário Secundário Sucesso Perigo Aviso Informações Leve Escuro

<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 às tecnologias assistivas

Usar cores para adicionar significado fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias do próprio conteúdo (por exemplo, o texto visível) ou sejam incluídas por meios alternativos, como texto adicional oculto com a .sr-onlyclasse.

Emblemas de pílula

Use a .badge-pillclasse modificadora para tornar os emblemas mais arredondados (com um border-radiushorizontal maior e adicional padding). Útil se você perder os emblemas da v3.

Primário Secundário Sucesso Perigo Aviso Informações Leve Escuro

<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

.badge-*O uso de classes contextuais em um <a>elemento fornece rapidamente emblemas acionáveis com estados de foco e foco.

Primário Secundário Sucesso Perigo Aviso Informações Leve Escuro

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