¿Descartar borrador?
Tipo 01
Alerta
Pregunta y dos acciones.
Componentes Diálogos
Diálogos
Un diálogo interrumpe al usuario para pedirle una decisión o mostrarle información crítica.
¿Eliminar el curso?
Se borrarán las notas y entregas. Esta acción no se puede deshacer.
Uso
Úsalo solo cuando la tarea necesita una respuesta inmediata: confirmar algo irreversible, elegir entre opciones críticas.
- Confirmar acciones que no se pueden deshacer
- Pedir un dato breve sin el cual no se puede seguir
- Mensajes informativos simples: usa una snackbar
- Formularios largos: usa una pantalla completa
Principios
1
Enfocado
Una sola tarea por diálogo.
2
Directo
El título es una pregunta clara.
3
Bloqueante
Hay que responderlo para seguir.
Tipos
Elegir jornada
- Mañana
- Tarde
- Noche
Tipo 02
Simple (lista)
Lista de opciones; tocar una cierra el diálogo.
Tono de llamada
Tipo 03
De confirmación
Opciones con botones de opción y confirmar.
Nuevo evento
Tipo 04
Pantalla completa
En celular, para tareas con varios campos.
Anatomía
¿Eliminar el curso?
Esta acción no se puede deshacer.
1234- Contenedor
- Título
- Texto de apoyo
- Botones de acción
- Fondo oscurecido (scrim)
Comportamiento
¿Eliminar el curso?
Esta acción no se puede deshacer.
- Aparece con un leve aumento de tamaño y un fondo oscuro (scrim).
- El foco pasa al diálogo y no puede salir de él hasta cerrarlo.
- Esc o "Cancelar" lo cierran sin hacer cambios.
Medidas
| Medida | Valor de referencia |
|---|---|
| Ancho | mín. 280 dp, máx. 560 dp |
| Radio | 4 dp |
| Margen interno | 24 dp |
| Título | 20 sp |
| Elevación | 24 dp |
| Scrim | negro al 32% |
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
Usa
O role="dialog" con aria-modal="true".
Foco atrapado
El Tab no sale del diálogo mientras está abierto.
Devuelve el foco
Al cerrar, el foco vuelve al botón que lo abrió.