Ir para o conteúdo principal Pular para a navegação de documentos
in English

Distintivos

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

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

Exemplo de títuloNovo

Exemplo de títuloNovo

Exemplo de títuloNovo

Exemplo de títuloNovo
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;