Badge
- Angular:
mds-badge - CSS/HTML (mds-styles): disponível
- Figma: ✅ — abrir Design System 2.0 ↗
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Badge é um pequeno indicador visual utilizado para exibir contagens, notificações ou estados de status associados a um elemento específico da interface. Ele ajuda o usuário a identificar rapidamente itens que requerem atenção ou ação.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Simplicidade no Conteúdo: Use apenas números ou palavras curtíssimas (ex: “Novo”, “Lido”).
- Vá Direto ao Ponto: Se o número for maior que 99, use o padrão “99+” para evitar que o componente cresça demais e quebre o layout.
- Hierarquia Visual: Posicione o Badge geralmente no canto superior direito do elemento pai (como um ícone de notificações ou uma aba de “Cargas”).
- Não se Repita: Se o Badge estiver sobre um ícone de “Caminhão”, não escreva “Caminhão: 5”. Use apenas “5”. O contexto visual já explica ao que o número se refere.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto | Estilo Incorreto (Prolixo) | Estilo UX (Conciso/Direto) |
|---|---|---|
| Contagem | Existem 12 novos alertas | 12 |
| Status de Carga | Esta carga é muito urgente | Urgente |
| Novidades | Item adicionado recentemente | Novo |