AlertDialog

Confirmación con foco bloqueado antes de una acción importante. Portal a body (por encima del TOC). Para paneles generales usa Modal; para laterales, Sheet.

Preview principal

ALERT DIALOGdelete

deletetype-confirmlogoutinfo

Eliminar proyecto

portal a body · Escape / backdrop cierran · z-index alto

Patrones

Destructiva, type-to-confirm, neutra e informativa.

TRIGGERS

destructiva

Eliminar

escribir para confirmar

Eliminar (type)

neutra

Cerrar sesión

solo cancelar

Aviso

Uso

import { useState } from "react";
import { AlertDialog, Button } from "devsoftec-ui";

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

  return (
    <>
      <Button variant="danger-outline" onClick={() => setOpen(true)}>
        Eliminar
      </Button>
      <AlertDialog
        open={open}
        onClose={() => setOpen(false)}
        title="¿Eliminar este proyecto?"
        description="Esta acción no se puede deshacer."
        destructive
        confirmText="eliminar"
        confirmLabel="Escribe «eliminar» para confirmar"
        cancel={<Button variant="tertiary" onClick={() => setOpen(false)}>Cancelar</Button>}
        action={<Button variant="danger" onClick={() => setOpen(false)}>Eliminar</Button>}
      />
    </>
  );
}

Con confirmText, el botón de acción queda disabled hasta que el texto coincida.

Props

Prop	Tipo	Default	Descripción
open	boolean	—	Visible
onClose	() => void	—	Cierre (Escape / backdrop)
title	ReactNode	—	Título
description	ReactNode	—	Cuerpo
action	ReactNode	—	Confirmación
cancel	ReactNode	—	Cancelar
destructive	boolean	false	Layout de riesgo
confirmText	string	—	Type-to-confirm
confirmLabel	string	i18n	Label del input
confirmPlaceholder	string	confirmText	Placeholder
confirmHelper	string	—	Ayuda bajo el input
onCancel	() => void	onClose	Escape / backdrop

Comportamiento

• Portal a document.body + z-index alto
• role="alertdialog" · aria-modal · labelledby / describedby
• Bloquea scroll del body
• Escape y clic en backdrop cierran
• Foco inicial: input de confirmación o el panel