> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# AlertDialog

> Solicita confirmación antes de una acción que requiere una decisión explícita.

## Resumen

Usa `AlertDialog` para una decisión que interrumpe el flujo de trabajo actual, como confirmar una eliminación. Proporciona semántica de `alertdialog`, gestión del foco y confirmación o cancelación explícitas.

Esta primitiva es para interfaces independientes de Twenty UI y controladas por el host. Los componentes Front deben solicitar una confirmación mediante la [API de diálogo del host de SDK](https://docs.twenty.com/es/developers/extend/apps/layout/front-components.md#host-communication-api). Los `Dialog`, `AlertDialog` y cuadros de diálogo nativos del navegador directos están prohibidos dentro del renderizador de componentes frontales.

**Light**

[Ejemplo de AlertDialog (light)](https://storybook.twenty.com/iframe.html?id=ui-surfaces-alertdialog--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Ejemplo de AlertDialog (dark)](https://storybook.twenty.com/iframe.html?id=ui-surfaces-alertdialog--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-surfaces-alertdialog--display)

## Uso

### Estado no controlado.

Usa `defaultOpen` para establecer la visibilidad inicial. El cuadro de diálogo gestiona los cambios posteriores de su activador, controles de cierre e interacciones de descarte.

```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { AlertDialog } from 'twenty-ui/primitives/surfaces';

type DeleteConfirmationProps = { onDelete: () => void };

export const DeleteConfirmation = ({ onDelete }: DeleteConfirmationProps) => (
  <AlertDialog.Root defaultOpen={false}>
    <AlertDialog.Trigger
      render={<Button variant="solid">Delete record</Button>}
    />
    <AlertDialog.Portal>
      <AlertDialog.Backdrop />
      <AlertDialog.Viewport>
        <AlertDialog.Popup>
          <AlertDialog.Header>
            <AlertDialog.Title>Delete this record?</AlertDialog.Title>
            <AlertDialog.Description>
              This record will be permanently deleted. This action cannot be
              undone.
            </AlertDialog.Description>
          </AlertDialog.Header>
          <AlertDialog.Footer>
            <AlertDialog.Close render={<Button>Cancel</Button>} />
            <AlertDialog.Close
              onClick={onDelete}
              render={<Button color="danger">Delete</Button>}
            />
          </AlertDialog.Footer>
        </AlertDialog.Popup>
      </AlertDialog.Viewport>
    </AlertDialog.Portal>
  </AlertDialog.Root>
);
```

`defaultOpen` tiene como valor predeterminado `false`, por lo que se puede omitir. Este ejemplo utiliza una devolución de llamada de confirmación síncrona y se cierra después de que se ejecuta la acción.

## Anatomía

Mantenga las partes relacionadas dentro de `AlertDialog.Root` o conecte los activadores separados mediante un identificador. Componga el portal, el fondo, el área de visualización y la ventana emergente por separado.

```text theme={null}
AlertDialog.Root
├── AlertDialog.Trigger
└── AlertDialog.Portal
    ├── AlertDialog.Backdrop
    └── AlertDialog.Viewport
        └── AlertDialog.Popup
            ├── AlertDialog.Header
            │   ├── AlertDialog.Title
            │   └── AlertDialog.Description
            ├── AlertDialog.Body
            └── AlertDialog.Footer
                ├── AlertDialog.Close
                └── Confirmation action
```

| Parte | Requisito | Propósito |
| - | - | - |
| `Root` | Obligatorio | Coordina el estado abierto y el comportamiento modal. |
| `Disparador` | Opcional para un cuadro de diálogo abierto mediante programación | Abre el cuadro de diálogo y proporciona un destino para devolver el foco. |
| `Portal` | Recomendado | Mueve la superposición a su contenedor y controla el montaje. |
| `Backdrop` | Opcional | Separa visualmente la alerta de la página circundante. |
| `Viewport` | Recomendado | Posiciona la ventana emergente y proporciona su área circundante desplazable. |
| `Popup` | Obligatorio | Renderiza el contenido de la alerta con gestión del foco. |
| `Título` | Recomendado | Proporciona el nombre visible de la alerta. Siempre se requiere un nombre accesible. |
| `Description` | Recomendado para una confirmación | Explica la decisión y sus consecuencias. |
| `Header`, `Body`, `Footer` | Partes opcionales de la estructura | Organizan encabezados, contenido adicional y acciones. |
| `Cerrar` | Recomendado para la cancelación | Proporciona una acción de cierre explícita. |

Establezca `container` y `keepMounted` en `Portal`, atributos de fondo en `Backdrop`, atributos de diseño en `Viewport`, y las props `size` y de foco en `Popup`. Cada parte del elemento acepta sus propios atributos nativos, controladores, ref y composición `render`. `Popup.ref` apunta al elemento de contenido de la alerta. `Title` y `Description` establecen las relaciones accesibles; proporcione `aria-label` en `Popup` cuando omita un título.

La acción de confirmación es contenido de la aplicación, no una parte exportada. Usa `Close` con un controlador síncrono o un `Button` con estado abierto controlado para la confirmación asíncrona.

## Estado controlado

Pasa `open` y actualízalo con `onOpenChange` para gestionar la visibilidad del mismo cuadro de diálogo en el estado de React. La devolución de llamada recibe el valor booleano solicitado y los detalles del evento ascendente, incluidos `reason`, `event` y `cancel()`. Llame a `eventDetails.cancel()` para rechazar un cambio solicitado. `onOpenChangeComplete` se ejecuta después de que finalicen las transiciones de apertura o cierre.

```tsx theme={null}
import { useState } from 'react';
import { Button } from 'twenty-ui/primitives/input';
import { AlertDialog } from 'twenty-ui/primitives/surfaces';

type DeleteConfirmationProps = { onDelete: () => void };

export const DeleteConfirmation = ({ onDelete }: DeleteConfirmationProps) => {
  const [open, setOpen] = useState(false);

  return (
    <AlertDialog.Root open={open} onOpenChange={setOpen}>
      <AlertDialog.Trigger
        render={<Button variant="solid">Delete record</Button>}
      />
      <AlertDialog.Portal>
        <AlertDialog.Backdrop />
        <AlertDialog.Viewport>
          <AlertDialog.Popup>
            <AlertDialog.Header>
              <AlertDialog.Title>Delete this record?</AlertDialog.Title>
              <AlertDialog.Description>
                This record will be permanently deleted. This action cannot be
                undone.
              </AlertDialog.Description>
            </AlertDialog.Header>
            <AlertDialog.Footer>
              <AlertDialog.Close render={<Button>Cancel</Button>} />
              <AlertDialog.Close
                onClick={onDelete}
                render={<Button color="danger">Delete</Button>}
              />
            </AlertDialog.Footer>
          </AlertDialog.Popup>
        </AlertDialog.Viewport>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
};
```

Para la confirmación asíncrona, usa un `Button` con tu controlador de acciones en lugar de `AlertDialog.Close`. Mantén `open` en true mientras la acción está pendiente, llama a `setOpen(false)` después de que tenga éxito y muestra un error dentro del cuadro de diálogo si falla.

## Componer con botones

Usa `render` para dar a los controles de activación y cierre el estilo de botón de Twenty UI. Las partes del cuadro de diálogo proporcionan sus controladores de interacción y referencias a los botones.

```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { AlertDialog } from 'twenty-ui/primitives/surfaces';

type DeleteConfirmationProps = { onDelete: () => void };

export const DeleteConfirmation = ({ onDelete }: DeleteConfirmationProps) => (
  <AlertDialog.Root>
    <AlertDialog.Trigger
      render={<Button variant="solid">Delete record</Button>}
    />
    <AlertDialog.Portal>
      <AlertDialog.Backdrop />
      <AlertDialog.Viewport>
        <AlertDialog.Popup>
          <AlertDialog.Header>
            <AlertDialog.Title>Delete this record?</AlertDialog.Title>
            <AlertDialog.Description>
              This record will be permanently deleted. This action cannot be
              undone.
            </AlertDialog.Description>
          </AlertDialog.Header>
          <AlertDialog.Footer>
            <AlertDialog.Close render={<Button>Cancel</Button>} />
            <AlertDialog.Close
              onClick={onDelete}
              render={<Button color="danger">Delete</Button>}
            />
          </AlertDialog.Footer>
        </AlertDialog.Popup>
      </AlertDialog.Viewport>
    </AlertDialog.Portal>
  </AlertDialog.Root>
);
```

Mantén cada acción como un único control interactivo. Si encapsulas `Button` en tu propio componente, [reenvía las propiedades y la referencia proporcionadas](https://docs.twenty.com/es/ui/primitives/overview#custom-components).

## Activadores separados y acciones imperativas

Cree un identificador una vez con `AlertDialog.createHandle\<Payload>()` y páselo a `handle` en `Root` y en cada `Trigger` separado. El `payload` tipado de un activador está disponible para la función de renderizado secundaria de la raíz. Un identificador también admite `open(triggerId)`, `openWithPayload(payload)`, `close()` y el getter `isOpen` mientras su raíz está montada. Pase un ID de activador coincidente a `open`, o `null` para abrir sin un activador. Llame a métodos imperativos desde controladores de eventos o efectos.

`Root.actionsRef` expone `close()` y `unmount()`. Para una animación de cierre controlada externamente, llame a `eventDetails.preventUnmountOnClose()` en `onOpenChange` y, a continuación, llame a `actionsRef.current?.unmount()` después de que finalice la animación. Las partes con estilo normales gestionan sus propias transiciones sin estas acciones imperativas.

## Tamaños y portales

`Popup.size` acepta `sm`, `md`, `lg`, `xl` y `fullscreen`, y el valor predeterminado es `md`. El tamaño y la apariencia pertenecen a la superficie de AlertDialog y no tienen que coincidir con los preajustes de Dialog.

`Portal.container` toma de forma predeterminada el contenedor del portal del tema más cercano. Sin uno, Base UI usa su destino de portal predeterminado, normalmente `document.body`. Un elemento explícito, una raíz sombreada o una ref anula ese destino. Un `null` explícito aplaza el montaje hasta que haya un contenedor disponible. Base UI resuelve una ref cuyo `current` es `null` mediante su destino predeterminado; use `container={null}` cuando el montaje deba esperar.

El contenido portalizado conserva el contexto del tema. `Portal` y `Viewport` heredan la dirección de texto proporcionada, a menos que establezca `dir` explícitamente. Establezca `Portal.keepMounted` para conservar el contenido montado y el estado del formulario mientras está cerrado.

## Foco y cierre

La alerta atrapa el foco, bloquea la interacción externa y bloquea el desplazamiento de la página mientras está abierta. Escape solicita el cierre; hacer clic fuera no. Para evitar el descarte con Escape, cancele el cambio `escape-key` en `onOpenChange`. Proporciona siempre una acción visible de Cancelar o Cerrar.

De forma predeterminada, el foco se mueve al primer control que permite tabulación o a la ventana emergente en una apertura táctil. Coloque primero la acción menos destructiva o use `Popup.initialFocus` para seleccionarla. El foco vuelve al activador o al elemento que tenía el foco anteriormente cuando se cierra la alerta. Use `Popup.finalFocus` cuando una acción correcta elimine ese destino. Ambas props de foco aceptan un booleano, una ref de elemento o una devolución de llamada de tipo de interacción según el contrato ascendente.

## "Props"

La referencia se genera a partir de los tipos de componentes públicos. Los atributos nativos, incluidos los nombres accesibles y los controladores de eventos, también se aceptan en las partes que renderizan elementos.

### AlertDialog.Root

**Root.actionsRef** `RefObject\<DialogRootActions | null\>`

A ref to imperative actions.

* `unmount`: Ends the closing phase of the alert dialog after an externally controlled closing animation finishes.
  Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the alert dialog completes closing on its own.
  Whether it leaves the DOM is decided by `keepMounted` on the portal.
* `close`: Closes the alert dialog imperatively when called.

**Root.children** `ReactNode | PayloadChildRenderFunction\<Payload\>`

The content of the dialog.
This can be a regular React node or a render function that receives the `payload` of the active trigger.

**Root.defaultOpen** `boolean` (default: false)

Whether the dialog is initially open.

To render a controlled dialog, use the `open` prop instead.

**Root.defaultTriggerId** `string | null`

ID of the trigger that the dialog is associated with.
This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.

**Root.handle** `AlertDialogHandle\<Payload\>`

A handle to associate the alert dialog with a trigger.
If specified, allows external triggers to control the alert dialog's open state.
Can be created with the AlertDialog.createHandle() method.

**Root.onOpenChange** `((open: boolean, eventDetails: AlertDialogRootChangeEventDetails) =\> void)`

Event handler called when the alert dialog is opened or closed.

**Root.onOpenChangeComplete** `((open: boolean) =\> void)`

Event handler called after any animations complete when the dialog is opened or closed.

**Root.open** `boolean`

Whether the dialog is currently open.

**Root.triggerId** `string | null`

ID of the trigger that the dialog is associated with.
This is useful in conjunction with the `open` prop to create a controlled dialog.
There's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set).

### AlertDialog.Trigger

**Trigger.className** `string | ((state: DialogTriggerState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Trigger.handle** `AlertDialogHandle\<Payload\>`

A handle to associate the trigger with an alert dialog.
Can be created with the AlertDialog.createHandle() method.

**Trigger.id** `string`

ID of the trigger. In addition to being forwarded to the rendered element,
it is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop).

**Trigger.nativeButton** `boolean` (default: true)

Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`).

**Trigger.payload** `Payload`

A payload to pass to the dialog when it is opened.

**Trigger.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, DialogTriggerState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Trigger.style** `CSSProperties | ((state: DialogTriggerState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### AlertDialog.Portal

**Portal.className** `string | ((state: DialogPortalState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Portal.container** `HTMLElement | ShadowRoot | RefObject\<HTMLElement | ShadowRoot | null\> | null`

Portal destination. Omission uses the theme container or Base UI default; explicit `null` defers mounting. A ref with a null current value uses the Base UI default destination.

**Portal.keepMounted** `boolean` (default: false)

Keeps content mounted while the alert is closed.

**Portal.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, DialogPortalState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Portal.style** `CSSProperties | ((state: DialogPortalState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### AlertDialog.Backdrop

**Backdrop.className** `string | ((state: DialogBackdropState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Backdrop.forceRender** `boolean` (default: false)

Whether the backdrop is forced to render even when nested.

**Backdrop.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, DialogBackdropState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Backdrop.style** `CSSProperties | ((state: DialogBackdropState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### AlertDialog.Viewport

**Viewport.className** `string | ((state: DialogViewportState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Viewport.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, DialogViewportState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Viewport.style** `CSSProperties | ((state: DialogViewportState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### AlertDialog.Popup

**Popup.className** `string | ((state: DialogPopupState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Popup.finalFocus** `boolean | RefObject\<HTMLElement | null\> | ((closeType: InteractionType) =\> boolean | void | HTMLElement | null)`

Determines the element to focus when the dialog is closed.

* `false`: Do not move focus.
* `true`: Move focus based on the default behavior (trigger or previously focused element).
* `RefObject`: Move focus to the ref element.
* `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.

**Popup.initialFocus** `boolean | RefObject\<HTMLElement | null\> | ((openType: InteractionType) =\> boolean | void | HTMLElement | null)`

Determines the element to focus when the dialog is opened.
By default, focus moves to the first tabbable element inside the popup, except when the dialog
is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.

* `false`: Do not move focus.
* `true`: Move focus based on the default behavior (first tabbable element or popup).
* `RefObject`: Move focus to the ref element.
* `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
  Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.

**Popup.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, DialogPopupState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Popup.size** `"fullscreen" | "lg" | "md" | "sm" | "xl"` (default: md)

Width of the alert, or `fullscreen` to fill the viewport.

**Popup.style** `CSSProperties | ((state: DialogPopupState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### AlertDialog.Title

**Title.className** `string | ((state: DialogTitleState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Title.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, DialogTitleState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Title.style** `CSSProperties | ((state: DialogTitleState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### AlertDialog.Description

**Description.className** `string | ((state: DialogDescriptionState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Description.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, DialogDescriptionState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Description.style** `CSSProperties | ((state: DialogDescriptionState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### AlertDialog.Close

**Close.className** `string | ((state: DialogCloseState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Close.nativeButton** `boolean` (default: true)

Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`).

**Close.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, DialogCloseState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Close.style** `CSSProperties | ((state: DialogCloseState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### AlertDialog.Header

**Header.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

### AlertDialog.Body

**Body.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

### AlertDialog.Footer

**Footer.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.