AlertDialog

Modal de confirmación para acciones críticas. No se cierra al hacer click fuera ni con Escape — requiere una acción explícita.

---

Import

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
} from '@imansi/ui';

---

Uso básico

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Eliminar cuenta</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>¿Estás seguro?</AlertDialogTitle>
      <AlertDialogDescription>
        Esta acción no se puede deshacer. Se eliminarán todos tus datos.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancelar</AlertDialogCancel>
      <AlertDialogAction>Confirmar</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

---

Con acción asíncrona

const [eliminando, setEliminando] = useState(false);

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Eliminar</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Confirmar eliminación</AlertDialogTitle>
      <AlertDialogDescription>
        Se eliminarán 5 elementos seleccionados.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel disabled={eliminando}>Cancelar</AlertDialogCancel>
      <AlertDialogAction
        disabled={eliminando}
        onClick={async (e) => {
          e.preventDefault();
          setEliminando(true);
          await eliminarItems();
          setEliminando(false);
        }}
      >
        {eliminando ? 'Eliminando...' : 'Eliminar'}
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

---

Props

Mismas que Dialog, más:

AlertDialogAction

Prop	Tipo	Default	Descripción
onClick	(e) => void	—	Handler del botón de acción
variant	string	'destructive'	Variante visual

AlertDialogCancel

Prop	Tipo	Default	Descripción
onClick	(e) => void	—	Handler del botón de cancelar (cierra el modal)

---

Accesibilidad

• Escape NO cierra el modal (requiere acción explícita)
• Click afuera NO cierra el modal
• Focus trap dentro del modal
• role="alertdialog" + aria-modal="true"
• Foco inicial en el botón de cancelar