Índice de apartados de esta página
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
Contenido
- 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 #
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.