# Modal Un modal es una superficie centrada que aparece sobre la página y bloquea la interacción con el contenido detrás. Se usa para tareas focalizadas o decisiones que requieren atención inmediata. ```tsx Archivar causa La causa se moverá al archivo y dejará de aparecer en filtros activos. {/* dos botones: esquinas opuestas */}
``` ## Uso ### Cuándo usar 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. ### Cuándo evitarlo - 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. ## Estructura ### Título, contenido, acciones 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. ```tsx Archivar causa La causa se moverá al archivo y dejará de aparecer en filtros activos. {/* dos botones: esquinas opuestas */}
``` ## Botones ### Reglas de posición 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. ### Un solo botón, centrado 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. ```tsx {/* un solo botón neutral: centrado al pie */}
``` ### Un solo botón, a la derecha Cuando el botón único hace avanzar el flujo (continuar, enviar, finalizar), se alinea a la derecha del pie del modal. ```tsx {/* un solo botón de avance: alineado a la derecha */}
``` ### Dos botones, en esquinas opuestas 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. ```tsx {/* dos botones: cancelar a la izquierda, primario a la derecha */}
``` ### Varios botones, sin posición fija 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. ```tsx {/* varios botones: sin posición fija, el grupo se acomoda al flujo */}
``` ## Variantes ### Destructivo 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. ```tsx Eliminar documento Esta acción no se puede deshacer. El documento se eliminará para todo el equipo.
``` ## Accesibilidad ### Foco y teclado - 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ó. ### Etiquetas - 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. ## Contenido ### Título y descripción - 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.