Tipo 01
Pequeña (punto)
Solo indica que hay novedades.
Componentes Insignias (badges)
Insignias (badges)
Una insignia es un pequeño indicador sobre un ícono que avisa de novedades: un punto o un número.
3999+
Uso
Úsalas para avisar que hay algo nuevo o pendiente en un destino de navegación o en un ícono de acción.
- Mensajes o notificaciones sin leer
- Contar elementos (carrito de compras)
- Información importante: el usuario puede no verla
- Sobre textos largos
Principios
1
Pequeña
No compite con el ícono que acompaña.
2
Informativa
Un punto dice "hay algo"; un número dice "cuánto".
3
Pasajera
Desaparece cuando el usuario atiende lo pendiente.
Tipos
12999+
Tipo 02
Grande (número)
Muestra la cantidad. Desde 1000 se escribe "999+".
Tipo 03
En navegación
Sobre los íconos de la barra o el riel de navegación.
Anatomía
12123
- Insignia pequeña (punto)
- Insignia grande (contenedor)
- Número
Comportamiento
0
- Aparece con una animación de escala corta.
- El número se actualiza en tiempo real.
- Desaparece cuando el contador llega a cero.
Medidas
| Medida | Valor de referencia |
|---|---|
| Insignia pequeña | 6 dp de diámetro |
| Insignia grande | 16 dp de alto, ancho según el número |
| Texto | 11 sp, peso medio |
| Color | error / on-error |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Anuncia el número
aria-label en el botón: "Mensajes, 3 sin leer".
No solo color
El número o el punto, no solo un cambio de color.
Actualizaciones
Si cambia en vivo, usa aria-live con moderación.