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:

• Cabecera: Se compone de un título que explique de manera clara y concisa el motivo de aparición del modal y opcionalmente un icono de la galería de Streamline bold de entre 64 y 120 px que apoye el mensaje en la parte superior.
• 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’).
• Botón-icono de cierre (‘x’): Se posiciona en la esquina superior derecha y permite cerrar la ventana.

Tipos #

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.