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

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

Exemplo de títuloNovo

Exemplo de títuloNovo

Exemplo de títuloNovo

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

html 
<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

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

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

Adicionado na v5.2.0

Defina um background-colorprimeiro plano contrastante colorcom nossos .text-bg-{color}ajudantes . Anteriormente, era necessário emparelhar manualmente sua escolha .text-{color}e .bg-{color}utilitários de estilo, que você ainda pode usar, se preferir.

Primário Secundário Sucesso Perigo Aviso Informações Leve Escuro
html 
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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
html 
<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Variáveis

Adicionado na v5.2.0

Como parte da abordagem de variáveis ​​CSS em evolução do Bootstrap, os emblemas agora usam variáveis ​​CSS locais .badgepara personalização aprimorada em tempo real. Os valores das variáveis ​​CSS são definidos por meio do Sass, portanto, a personalização do Sass também é suportada.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Variáveis ​​atrevidas

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