Superposiciones

AlertDialog

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

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`.

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

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

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

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 Button