Documentação e exemplos sobre os badges, nosso pequeno componente para contagem e rótulos.
Exemplo
Os badges escalam para combinar com o tamanho do elemento pai imediato, usando font-size relativa e unidade em.
Cabeçalho exemplo Novo
Cabeçalho exemplo Novo
Cabeçalho exemplo Novo
Cabeçalho exemplo Novo
Cabeçalho exemplo Novo
Cabeçalho exemplo Novo
Badges podem ser usados como parte de links ou botões para realizar contagem.
Perceba que dependendo do uso, badges podem ser confusos para usuários de leitores de telas e tecnologias assistivas similares. Apesar do estilo dos badges serem intuitivos, esses usuários vão ser apresentados só ao conteúdo contido neles. Por isso, dependendo da situação, esses badges podem parecer palavras ou números quaisquer ao final da frase, link ou botão.
A não ser que o contexto esteja claro (como no exemplo “Notificações”, onde é entendido que o 4 é o número de notificações), considere criar contexto com um texto adicional escondido visualmente.
Variações contextuais
Adicione qualquer uma das classes modificadoras mencionadas abaixo para mudar a aparência de um badge.
PrimarySecondarySuccessDangerWarningInfoLightDark
Transmitindo significado a tecnologias assistivas
Usando cor para adicionar significado só fornece uma indicação visual, a qual não será transmitida para usuários de tecnologias assistivas (como leitores de telas). Se assegure que a informação denotada pela cor é tanto destacada do conteúdo (ex: o texto visível) ou está incluída em meios alternativos, como textos extras escondidos com a classe .sr-class.
Badges em pílulas
Use a classe modificadora .badge-pill para fazer com que os badges fiquem mais arredondados (border-radius maior e padding horizontal adicional). É útil se você precisa dos badges da v3.
PrimarySecondarySuccessDangerWarningInfoLightDark
Links
Usando as classes contextuais .badge-*, em um elemento <a>, rapidamente, consiga badges acionáveis com estados hover e focus.