Skip to main content

Badge

O componente Badge exibe a contagem, sinalização ou indica visualmente que há itens pendentes, ou novos, não possui nenhuma interação

Quando usar?​

  • Para direcionar a atenção a um elemento na interface;
  • Para exibir valores numéricos relacionados a um elemento;
  • Para notificações e sinalizações.

Como usar?​

  • É possível adicionar a direita, esquerda, acima ou abaixo do componente

Anatomia​

1. Rounded

Alt text

2. Pill

Alt text

3. Dot

Alt text

4. Count

Alt text

Variações e tamanhos​

O Bagde tem 4 variações principais:

  • Rounded: usado como rótulos ou status em tabelas
  • Pill: usado como rótulos ou status em tabelas
  • Dot: usado como sinalização, apoiando outros componentes
  • Count: usado para realizar contagens, apoiando outros componentes
alt text

Dois estilos:

  • Default: usado em casos de background mais claros
  • Outline: usado em casos de background escuro, como tema dark

E três tamanhos:

Alt text

Exemplos​

Alt text