Dialog

Modal centrado con overlay. Bloquea la interacción con el resto de la página hasta que se cierre.

---

Import

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from '@imansi/ui';

---

Uso básico

<Dialog>
  <DialogTrigger asChild>
    <Button>Abrir modal</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Título del modal</DialogTitle>
      <DialogDescription>
        Descripción corta de qué hace este modal.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancelar</Button>
      </DialogClose>
      <Button>Confirmar</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

---

Controlado

import { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@imansi/ui';

export function Ejemplo() {
  const [abierto, setAbierto] = useState(false);

  return (
    <>
      <Button onClick={() => setAbierto(true)}>Abrir</Button>
      <Dialog open={abierto} onOpenChange={setAbierto}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Modal controlado</DialogTitle>
          </DialogHeader>
        </DialogContent>
      </Dialog>
    </>
  );
}

---

Props

Dialog

Prop	Tipo	Default	Descripción
open	boolean	—	Estado controlado
defaultOpen	boolean	false	Estado inicial
onOpenChange	(open: boolean) => void	—	Callback al abrir/cerrar
modal	boolean	true	Bloquea interacción con el fondo

DialogContent

Prop	Tipo	Default	Descripción
className	string	—	Clases adicionales
onEscapeKeyDown	(e) => void	—	Handler de Escape
onInteractOutside	(e) => void	—	Handler de click afuera

---

Accesibilidad

• Escape cierra el modal
• Click en el overlay cierra el modal (configurable)
• Tab cicla el foco dentro del modal (focus trap)
• role="dialog" + aria-modal="true" + aria-labelledby + aria-describedby
• Scroll del body se bloquea automáticamente