Distintivos

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

Nesta página

Exemplos

Os emblemas são dimensionados para corresponder ao tamanho do elemento pai imediato usando o tamanho e emas unidades de fonte relativos. A partir da v5, os emblemas não têm mais estilos de foco ou foco para links.

Títulos

Exemplo de títuloNovo

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

Botões

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 bg-secondary">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.

Posicionado

Use utilitários para modificar um .badgee posicioná-lo no canto de um link ou botão.

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

Você também pode substituir a .badgeclasse por mais alguns utilitários sem contar para um indicador mais genérico.

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Cores de fundo

Use nossas classes de utilitários em segundo plano para alterar rapidamente a aparência de um emblema. Observe que, ao usar o padrão do Bootstrap .bg-light, você provavelmente precisará de um utilitário de cor de texto .text-darkpara um estilo adequado. Isso ocorre porque os utilitários em segundo plano não definem nada além background-colorde .

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

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-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 .visually-hiddenclasse.

Emblemas de pílula

Use a .rounded-pillclasse utilitária para tornar os crachás mais arredondados com um border-radius.

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

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

Sass

Variáveis

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;