Tu certificado está listo.
Tipo 01
Una línea
Texto corto y una acción.
Componentes Banners
Banners
Un banner muestra un mensaje importante y persistente, con una o dos acciones. Se queda hasta que el usuario lo atiende o lo cierra.
No hay conexión. Los cambios se guardarán cuando vuelva internet.
Uso
Úsalo para avisos que el usuario debe ver y resolver, pero que no bloquean su trabajo: conexión perdida, cuenta por verificar, una función nueva.
- Un aviso importante y persistente
- Un mensaje que requiere una acción opcional
- Confirmar acciones breves: usa una snackbar
- Decisiones obligatorias: usa un diálogo
Principios
1
Visible
Aparece arriba del contenido y no desaparece solo.
2
Breve
Una o dos líneas de texto.
3
Accionable
Ofrece una o dos acciones claras.
Tipos
Verifica tu correo institucional para recibir las notas.
Tipo 02
Dos líneas con ícono
Ícono, texto más largo y dos acciones.
Anatomía
No hay conexión.
1234- Contenedor
- Imagen o ícono (opcional)
- Mensaje
- Botones de acción
Comportamiento
No hay conexión. Los cambios se guardarán después.
- El banner aparece arriba y empuja el contenido hacia abajo.
- Permanece hasta que el usuario toca una acción.
- Al cerrarse, el contenido recupera su lugar con una transición.
Medidas
| Medida | Valor de referencia |
|---|---|
| Alto de una línea | aprox. 52 dp |
| Ícono o imagen | 40 dp |
| Margen interno | 16 dp (24 en escritorio) |
| Botones | texto, 8 dp entre ellos |
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
Anúncialo
Usa role="status" para que el lector de pantalla lo lea.
No lo quites solo
Debe esperar la acción del usuario.
Botones claros
"Reintentar" mejor que "Aceptar".