Badge

Os Badges mostram notificações, contagens ou informações de status em itens e ícones de navegação

Figma

---

Uso

Os Badges são usados ​​para indicar uma notificação, contagem de itens ou outras informações relacionadas a um destino de navegação. Eles são colocados na borda final dos ícones, normalmente dentro de outros componentes.

---

Anatomia

❖. Container

O container recebe cores de acordo com o Appearance escolhido.

1. Label

O número máximo de caracteres no texto do label do Badge grande é três, incluindo um + para indicar mais.

Use a contagem máxima de caracteres recomendada para garantir que os rótulos não se estendam além do contêiner do emblema.

✅ Do

Truncar Badges conforme necessário

❌ Don't

Não deixe que o Badge seja cortado ou colida com outro elemento

---

Variantes

Small

Um Small Bagde é um círculo simples, usado para indicar uma notificação não lida.

Large

Um Large Badge contém texto de etiqueta comunicando informações sobre a contagem de itens.

---

Referências

Material Design

---

Histórico de Atualizações

Figma	Gitbook	Android	iOS	Web
31/07/2024	03/09/2024			Ver na tabela

Atualizações por data

Julho 2024

31/07/2024

• Documentação da criação do componente

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.