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 em
as 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 .badge
e 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 .badge
classe 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-dark
para um estilo adequado. Isso ocorre porque os utilitários em segundo plano não definem nada além background-color
de .
<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-hidden
classe.
Emblemas de pílula
Use a .rounded-pill
classe utilitária para tornar os crachás mais arredondados com um border-radius
.
<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;