Modal

Diálogo superpuesto para confirmaciones, formularios y contenido contextual. Accessible con trap de focus y cierre con Escape.

Demo interactiva

Abrir modal

Estructura

import { Modal, ModalHeader, ModalTitle, ModalDescription, ModalFooter } from '@codeway/ui';

function ConfirmDialog() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Abrir</Button>
      <Modal open={open} onClose={() => setOpen(false)}>
        <ModalHeader>
          <ModalTitle>Título</ModalTitle>
          <ModalDescription>Descripción opcional</ModalDescription>
        </ModalHeader>
        {/* Contenido libre aquí */}
        <ModalFooter>
          <Button variant="ghost" onClick={() => setOpen(false)}>
            Cancelar
          </Button>
          <Button onClick={handleConfirm}>
            Confirmar
          </Button>
        </ModalFooter>
      </Modal>
    </>
  );
}

Lineamientos

  • • Cierre con Esc y click en backdrop
  • • aria-modal="true" y role="dialog" automáticos
  • • Body scroll bloqueado mientras está abierto
  • • Acción destructiva siempre a la derecha con variante destructive
  • • En mobile: considerar bottom sheet en vez de modal centrado
  • • Max-width de 32rem (max-w-lg) por defecto