# AlertDialog

> Confirmar algo que no se puede deshacer. Exige una respuesta.

```tsx
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogClose, … } from "sebs7n-ui/alert-dialog"
```

## Ejemplos

### Confirmar algo destructivo

`AlertDialogAction` no cierra sola: se envuelve en `AlertDialogClose` o se controla `open`.

```tsx
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "sebs7n-ui/alert-dialog"
import { Button } from "sebs7n-ui/button"

function Basico() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="destructive" />}>Eliminar factura</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>¿Eliminar la factura 0012?</AlertDialogTitle>
          <AlertDialogDescription>
            Se borra del listado y del resumen del mes. No se puede deshacer.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel />
          <AlertDialogClose render={<AlertDialogAction variant="destructive" />}>Eliminar</AlertDialogClose>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
```

## Props

### AlertDialog

Hereda las props de `AlertDialog.Root`.

Sin props propias: pasa todo al primitivo.

### AlertDialogAction

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `loading` | `boolean` | — | — |
| `shape` | `"default" \| "pill"` | — | La forma del botón. `pill` es `rounded-full` con un escalón más de padding horizontal: en una curva completa, el texto que empieza donde empezaba en un rectángulo queda pegado al borde. **Solo para los CTA de un hero o de una sección de marketing.** Es la regla de vercel.com, donde los dos CTA del hero son píldoras y el resto del sitio no: mezclar las dos formas en la misma pantalla se ve descuidado, así que en el chrome de una app —nav, tablas, formularios, diálogos— no va nunca. |
| `size` | `"sm" \| "md" \| "lg" \| "icon-sm" \| "icon-md" \| "icon-lg"` | — | — |
| `variant` | `"default" \| "destructive"` | `"default"` | — |
| `className` | `string` | — | — |

### AlertDialogCancel

Hereda las props de `AlertDialog.Close`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `size` | `"sm" \| "md" \| "lg" \| "icon-sm" \| "icon-md" \| "icon-lg"` | — | — |
| `className` | `string` | — | — |

### AlertDialogClose

Hereda las props de `AlertDialog.Close`.

Sin props propias: pasa todo al primitivo.

### AlertDialogContent

Hereda las props de `AlertDialog.Popup`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AlertDialogDescription

Hereda las props de `AlertDialog.Description`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AlertDialogFooter

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AlertDialogHeader

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AlertDialogOverlay

Hereda las props de `AlertDialog.Backdrop`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AlertDialogTitle

Hereda las props de `AlertDialog.Title`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AlertDialogTrigger

Hereda las props de `AlertDialog.Trigger`.

Sin props propias: pasa todo al primitivo.

## Teclado

| Tecla | Qué hace |
|---|---|
| Escape | Cierra (equivale a cancelar). |
| Tab | Atrapado entre las acciones. |
| Click en el fondo | No cierra: es la diferencia con `Dialog`. |

## Accesibilidad

- Emite `role="alertdialog"`, que el lector anuncia con más urgencia que un diálogo común.
- No tiene botón X: la única salida es una de las dos acciones.
- El foco arranca en «Cancelar», no en la acción destructiva.

## Reglas de uso

- **`AlertDialogAction` no cierra sola** — a propósito, para poder mostrar `loading` mientras corre la acción. O controlás `open`, o la envolvés: `<AlertDialogClose render={<AlertDialogAction variant="destructive" />}>Eliminar</AlertDialogClose>`.
- `AlertDialogCancel` sí cierra sola.
- El título es la pregunta («¿Eliminar la factura 0012?»), no «¿Estás seguro?».
- El botón dice qué va a pasar («Eliminar»), no «Aceptar».

## Relacionados

[dialog](/docs/components/dialog.md) · [button](/docs/components/button.md)