Ventana modal

Definición

Las ventanas modales se muestran superpuestas sobre la página. Se utilizan para presentar información necesaria o para solicitar al usuario a que ejecute una acción antes de interactuar con la página.

Anatomía

La ventana modal se compone de los siguientes elementos:

1. Título: Explica el objetivo de la ventana.
2. Descripción (opcional): en esta parte es donde se encuentra la información.
3. Barra de acción (opcional): Contiene la acción primaria y una acción secundaria.
4. Cerrar ventana (opcional): icono ubicado en la parte superior derecha de la ventana que permite cerrar el elemento sin ejecutar ninguna acción.
5. Cortina: Oscurece el contenido en segundo plano para enfocar la información hacia la ventana modal.

Tipos

Informativa

La ventana modal estándar es de carácter informativo y no incluye botones de acción, pero sí título, mensaje informativo y aspa de cierre. Para cerrar la ventana, se puede utilizar el aspa de cierre o hacer clic en la cortina.

Interactiva

Incluye una barra de acciones, con botón o grupo de botones con los que es necesario interactuar para poder continuar con la navegación.

Pautas de uso

Analiza alternativas a las ventanas modales

Las ventanas modales son muy intrusivas, por lo que deben usarse solo cuando sea imprescindible. Plantéate si un mensaje de alerta o un formulario de configuración dentro de la página puede hacer la misma función.

Cuida el texto de la ventana

Incluye un título claro, una breve frase que resuma la información o el propósito de la ventana. Si necesitas incluir más información, incorpora una breve descripción con el mismo objetivo. Procura que el texto sea lo más breve posible para evitar el scroll interno dentro de la ventana.

Si incluyes una barra de acciones, cuida el etiquetado y respeta las pautas establecidas para la ubicación de botones primarios y secundarios.

Componentes relacionados

Similar a:

• Ayuda contextual

Recursos asociados al componente

Diseño:

Figma

Implementación:

Storybook (solo accesible desde la RCJA)

Control de versiones