Tamaños

Hay cuatro tamaños modales: extra pequeño, pequeño, predeterminado, grande. Elija un tamaño que funcione mejor para la cantidad de contenido modal que tiene. Los modales con mensajes cortos deben usar un modal pequeño para evitar largas líneas individuales; para componentes complejos, como la tabla de datos, el modal predeterminado o grande será más cómodo.

Cada tamaño modal tiene un ancho de respuesta que cambia según el tamaño del navegador. A medida que el navegador disminuye, el porcentaje de ancho modal aumenta, manteniendo así una proporción adecuada entre el modal y el navegador.

Alturas máximas

Cada tamaño modal tiene una altura máxima para mantener una proporción de ventana adecuada. Si su modal tiene demasiado desplazamiento debido a una altura máxima, considere usar el siguiente tamaño modal. Si la altura modal grande todavía no es suficiente espacio, entonces este es un indicador de que puede ser necesaria una página completa en su lugar.

Móvil

En dispositivos móviles, en los puntos de ruptura más pequeños no se aplica la altura máxima. La altura puede ser el 100% de la pantalla o mantener la altura definida por el contenido mientras se adhiere a la parte inferior de la pantalla del móvil.

Título como mensaje

Para mensajes cortos y directos, el título puede incluir todo el mensaje para agregar claridad visual a un título y un mensaje de cuerpo que de otro modo serían repetitivos. Al utilizar este estilo, no se puede incluir ningún otro cuerpo.

Comportamientos

Desencadenar

Los modales se activan como resultado de la acción de un usuario y no son generados por el sistema. Los componentes comunes que pueden activar una inclusión modal, un botón, un enlace o un icono. En un teclado, seleccionando Entero Spacedebería iniciar el modal.

Atención

Una vez que el modal esté abierto, establezca el enfoque inicial en la primera ubicación que acepte la entrada del usuario. Por ejemplo, si el modal contiene un formulario, el foco debe establecerse automáticamente en el primer campo cuando se abre. Si es un modal transaccional sin entradas de formulario en la sección del cuerpo, entonces el primer enfoque debe estar en el botón principal.

El foco debe permanecer atrapado en el cuadro de diálogo hasta que se cierre. Al navegar por el teclado, Taby Shift-Tabno mueva el exterior foco de la modal.

Cargando

La acción de finalización de la tarea debe realizarse de inmediato. Si se necesita un período de carga más largo, entonces debería aparecer una ruleta de carga y una superposición en la parte superior del área del cuerpo modal con el contenido desactivado. El botón de acción principal debe desactivarse mientras se realiza la carga.

Si se necesita un período de carga rápido, utilice un comportamiento de carga en línea en el botón principal para indicar que los datos se están procesando.

Extra pequeña

Pequeña

Defecto

Grande

Validación

Valide las entradas de un usuario antes de que se cierre el modal. Si alguna entrada no es válida, el modal debe permanecer abierto con la entrada marcada en un estado de error e incluir un mensaje de error en línea. El mensaje debe informar al usuario lo que ha sucedido y brindar orientación sobre los próximos pasos o posibles soluciones. Los mensajes de error efectivos e inmediatos pueden ayudar al usuario a comprender el problema y cómo solucionarlo.

Cuando sea posible, recomendamos validar los datos del usuario antes de enviarlos. Este tipo de validación en línea (también conocida como validación del lado del cliente) debería ocurrir tan pronto como el campo pierda el foco. Esto ayudará a identificar fácilmente los elementos que deben corregirse. Los mensajes de error en el campo deberían desaparecer cuando se cumplen los criterios del formulario. Si los datos no se pudieron enviar debido a problemas del lado del servidor, debería aparecer una notificación en línea.

Mejores prácticas

Utilice los diálogos con moderación

No abuses de los diálogos. Son disruptivos y pueden molestar fácilmente al usuario si se usan incorrectamente o con demasiada frecuencia. Cuando se utilizan cuadros de diálogo para tareas no relacionadas con el flujo de trabajo, es probable que un usuario comience a ignorar o descartar los cuadros de diálogo sin comprender completamente el contenido. Esto puede hacer que los usuarios tomen decisiones apresuradas o impulsivas cuando se trata de diálogos más críticos.

Los diálogos deben ser iniciados por el usuario

Una acción del usuario, como hacer clic en un botón, debería activar la apertura del cuadro de diálogo. No interrumpa al usuario abriendo un cuadro de diálogo cuando no lo espera. Evite las ventanas emergentes generadas por el sistema que distraigan al usuario mientras trabaja. Los desencadenantes pueden ser una consecuencia directa o indirecta de la acción de un usuario. Un ejemplo de una acción indirecta es un usuario que cierra una pestaña con contenido no guardado que luego hace que un cuadro de diálogo le pregunte si desea guardar sus cambios antes de cerrar. Si el sistema genera automáticamente una alerta que no es consecuencia de la acción de un usuario, sino una respuesta a los procesos que ocurren en segundo plano, entonces se debe usar una notificación de brindis.

Mantenga las tareas de diálogo simples y enfocadas

Las tareas de diálogo deben ser directas y fáciles de completar. Evite la aparición de características en los diálogos donde un diálogo que alguna vez fue simple se ha llenado de interacciones. Al decidir utilizar un diálogo, considere cómo la tarea podría expandirse en el futuro y si un diálogo podrá incorporar adiciones de manera efectiva. Un ejemplo de una tarea simple sería agregar un nuevo elemento a una lista donde los detalles del elemento se agregan y envían a través de un diálogo.