Modal

Se trata de una ventana emergente o pop-up y se emplean cuando queremos centrar toda la atención en cierta información, generalmente, cuando se requiere alguna acción antes de continuar con el proceso.

Anatomía #

Esta ventana aparece superpuesta sobre la página y está formada por los siguientes elementos:

Contenedor: Es la ventana que aparece superpuesta a la página, con borde 1 px y neutral-base. El área exterior deberá estar con una capa de color black al 50% de opacidad, para ocultar el contenido de la página.
Botón de cierre: Se posiciona en la esquina superior derecha y permite cerrar la ventana.
Icono como apoyo visual: Se posiciona encima del encabezado, con unas dimensiones de 64x64 px y en la variante primary-light o alert-light según el tipo de modal.
Cabecera: Se compone de un título que explique de manera clara y concisa el motivo de aparición del modal.
Contenido: Texto descriptivo que puede llevar scroll en caso de ser necesario.
Acciones: Botón o grupo de botones que deberán quedar alineados a la izquierda, centrado cuando sólo es un único botón u distribuidos equitativamente a lo largo del ancho. En los casos en los que se requiera consistencia visual, como por ejemplo con un stepper, deberán ir alineado cada uno a un lado, para reforzar el significado de dirección de los botones (‘Anterior’, ‘Siguiente’).

Variantes #

Modal informativa

Si sales de la pantalla de edición sin guardar, perderás los cambios realizados.

Modal destructiva

Esta acción no se puede deshacer ¿Estás seguro?

Informativa #

En este caso, el botón principal se coloca a la izquierda.

Destruciva #

En caso de que la acción requiera confirmar la eliminación de una determinada información, el botón principal se coloca a la derecha, con color rojo (alerta), al igual que el icono.

Buenas prácticas #

Se recomienda emplear solamente para transmitir información relevante, incluyendo únicamente un mensaje por modal.
Se recomienda mantener los campos de entradas y las llamadas a acciones al mínimo.
En caso de emplear un icono en la cabecera, debe acompañar el mensaje y aporte información relevante, no se incluye de manera decorativa. Además, se deben emplear iconos de la librería Streamline bold, a un tamaño de entre 64 y 120 px y deben incluirse con la extensión .svg.