Componentes
Badge
Indicador de estado posicionado sobre um ícone ou elemento. Sinaliza notificações não lidas, erros ou contagens sem interromper o fluxo.
Visão geral
Início
Coleção
5
Perfil
Dot no Feed · Count "5" no Perfil
Anatomia
Variante Dot
1
Badge dot
w-[9px] h-[9px] · bg-[#C8F53C] · rounded-full · border-[1.5px] border-[#0f0f0f] · absolute -top-0.5 -right-0.5
2
Ícone pai
Container com position:relative. O badge é filho direto para posicionamento absoluto.
Variantes
Dot
Notificação genérica. Indica "há algo novo" sem revelar quantidade. Usado quando o número não agrega valor.
Count
7
Quantidade exata de itens não lidos ou pendentes. Usado quando o número motiva ação (ex: 7 notificações).
Cap 99+
99+
Cap ao atingir 100+. Evita que o badge quebre o layout com números muito grandes.
Do / Don't
FaçaBadge pequeno, posicionado no canto superior direito do ícone com border que o separa do fundo.
!
EviteBadge grande ou centralizado encobre o ícone. Badge deve ser discreto — o conteúdo principal deve ser legível.
Specs
| Propriedade | Dot | Count |
|---|---|---|
| Tamanho mínimo | 9×9px | 16×16px (1 dígito), 20×16px (2+) |
| Background | #C8F53C | |
| Border | 1.5px solid #0f0f0f (ou cor do fundo pai) | |
| Border radius | rounded-full | rounded-full (pílula) |
| Posição | absolute -top-0.5 -right-0.5 (dot) / -top-1.5 -right-2 (count) | |
| Font size | — | 9px, weight 800, cor #fff |
| Cap | — | 99+ quando valor ≥ 100 |
| z-index | z-10 para ficar sobre o ícone | |