Modal

• La tarea es corta, focalizada y se completa sin perder el contexto principal.
• La acción requiere confirmación explícita antes de continuar.
• La decisión es irreversible o tiene consecuencias importantes.

• Para mensajes pasajeros: usa toast.
• Para información contextual no esencial: usa popover o tooltip.
• Para tareas largas o flujos de varios pasos que se benefician de la página completa: navega a una vista dedicada.

Un modal tiene tres regiones claras: un título breve que nombra la decisión, un contenido que explica las consecuencias y un set de acciones al pie. Mantén ese orden de lectura.

En Lexy los botones de un modal viven siempre en la parte inferior. La posición concreta depende de cuántos haya y de qué función cumplan:

• Un botón neutral (un simple acuse de recibo): centrado al pie.
• Un botón de avance o confirmación: alineado a la derecha del pie.
• Dos botones: en esquinas opuestas. Cancelar a la izquierda, primario a la derecha.
• Tres o más botones: no hay una posición determinada, el grupo se acomoda según el flujo y la jerarquía visual.

Cuando el modal solo informa o pide un acuse de recibo, el botón se centra al pie. El usuario no decide, solo confirma haber leído.

Cuando el botón único hace avanzar el flujo (continuar, enviar, finalizar), se alinea a la derecha del pie del modal.

Con dos acciones, cada una ocupa una esquina del pie. La acción de cancelar queda a la izquierda y la primaria a la derecha, separadas para evitar clics accidentales.

Si el modal expone tres o más acciones, no hay una regla única de posición. Agrupa por jerarquía y deja que el diseño del contenido guíe la composición.

Cuando la acción borra, elimina o revierte algo de forma irreversible, el modal debe nombrar la consecuencia con precisión. El botón primario mantiene el mismo verbo del título.

• Al abrirse, el foco se mueve al primer control interactivo del modal.
• El foco queda atrapado dentro del modal hasta que se cierra.
• Esc cierra el modal y devuelve el foco al elemento que lo abrió.

• El modal se anuncia con role="dialog" y aria-labelledby apuntando al título.
• Si el contenido necesita contexto adicional, usa aria-describedby.
• Evita superficies modales encadenadas: un modal sobre otro confunde el foco y la jerarquía.

• El título es una afirmación corta sobre la decisión, no una pregunta.
• El contenido explica qué pasará y, si aplica, cómo se puede revertir.
• Si la acción no se puede deshacer, dilo explícitamente.