Diálogo modal de confirmación
Sobre <dialog> nativo: foco atrapado, Escape y clic fuera cierran, el foco vuelve al botón; acción destructiva con confirmación escrita.
Descargar gratisModales, paneles y capas para React
Diálogos de confirmación, hojas inferiores arrastrables, paneles laterales, popovers anclados, menús contextuales, lightbox y snackbars, con foco controlado y cierre con Escape.
Cuando es posible usan el elemento <dialog> nativo, así que el navegador resuelve el foco, la capa superior y el cierre.
Para qué sirven
- Confirmaciones antes de acciones destructivas
- Configuración en paneles laterales
- Galerías de imágenes y menús contextuales
9 componentes de modales y capas
Diálogo liquid glass
Diálogo de cristal líquido que nace del propio botón y refracta el fondo en su borde, con formulario validado.
Descargar gratisDiálogo neobrutalista
Caja de borde grueso con sombra dura que entra con rebote, banda de título tipo ventana y botones que se hunden.
Descargar gratisPanel lateral de ajustes
Drawer sobre <dialog> que entra desde el lateral, con interruptores, selector y botones de guardar. Material oscuro.
Descargar gratisHoja inferior arrastrable
Bottom sheet estilo iOS que se cierra arrastrando el asa más allá de un umbral, con Escape y clic fuera.
Descargar gratisPopover anclado para compartir
Panel con flecha anclado a su botón: Escape, clic fuera o salir con Tab lo cierran y el foco vuelve; copia el enlace.
Descargar gratisMenú contextual de clic derecho
Se abre con clic derecho, tecla de menú o Mayús+F10; flechas, Inicio, Fin y Escape, atajos visibles y posición dentro del área.
Descargar gratisGalería con lightbox
Miniaturas que abren la imagen a pantalla completa con flechas del teclado, contador y pie; ilustraciones SVG propias.
Descargar gratisSnackbar Material Design 3
Aviso breve con acción Deshacer; el cierre automático se pausa al apuntar o enfocar y se anuncia por región viva.
Descargar gratis