> ## 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ți confirmarea înaintea unei acțiuni care necesită o decizie explicită.

## Prezentare generală

Utilizați `AlertDialog` pentru o decizie care întrerupe fluxul de lucru curent, cum ar fi confirmarea ștergerii. Oferă semantica `alertdialog`, gestionarea focalizării și confirmare sau anulare explicită.

Această componentă primitivă este destinată interfețelor Twenty UI autonome și interfețelor deținute de gazdă. Componentele Front trebuie să solicite o confirmare prin intermediul [API-ului de dialog al gazdei SDK](https://docs.twenty.com/ro/developers/extend/apps/layout/front-components.md#host-communication-api). `Dialog`, `AlertDialog` directe și dialogurile native ale browserului sunt interzise în cadrul randatorului de componente frontale.

**Light**

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

**Dark**

[Exemplu 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)

## Utilizare

### Stare necontrolată

Utilizați `defaultOpen` pentru a seta vizibilitatea inițială. Dialogul gestionează modificările ulterioare prin declanșatorul său, controalele de închidere și interacțiunile de anulare.

```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` are implicit valoarea `false`, deci poate fi omis. Acest exemplu utilizează un callback de confirmare sincron și se închide după rularea acțiunii.

## Anatomie

Păstrați părțile asociate în `AlertDialog.Root` sau conectați declanșatoarele detașate printr-un handle. Compuneți separat portalul, fundalul, viewportul și fereastra pop-up.

```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 | Cerință | Scop |
| - | - | - |
| `Root` | Obligatoriu | Coordonează starea de deschidere și comportamentul modal. |
| `Declanșator` | Opțional pentru o casetă de dialog deschisă programatic | Deschide caseta de dialog și oferă o țintă pentru revenirea focalizării. |
| `Portal` | Recomandat | Mută suprapunerea în containerul său și controlează montarea. |
| `Backdrop` | Opțional | Separă vizual alerta de pagina înconjurătoare. |
| `Viewport` | Recomandat | Poziționează fereastra pop-up și furnizează zona înconjurătoare derulabilă a acesteia. |
| `Popup` | Obligatoriu | Redă conținutul alertei cu gestionarea focalizării. |
| `Titlu` | Recomandat | Furnizează numele vizibil al alertei. Este întotdeauna necesar un nume accesibil. |
| `Description` | Recomandat pentru o confirmare | Explică decizia și consecințele acesteia. |
| `Header`, `Body`, `Footer` | Părți opționale ale structurii | Aranjează titlurile, conținutul suplimentar și acțiunile. |
| `Închide` | Recomandat pentru anulare | Furnizează o acțiune explicită de închidere. |

Setați `container` și `keepMounted` pe `Portal`, atributele de fundal pe `Backdrop`, atributele de aspect pe `Viewport`, precum și proprietățile `size` și de focalizare pe `Popup`. Fiecare parte a elementului acceptă propriile atribute native, handlere, ref și compunerea `render`. `Popup.ref` indică elementul de conținut al alertei. `Title` și `Description` stabilesc relațiile de accesibilitate; furnizați `aria-label` pe `Popup` când omiteți un titlu.

Acțiunea de confirmare este conținut al aplicației, nu o parte exportată. Utilizați `Close` cu un gestionar sincron sau un `Button` cu stare de deschidere controlată pentru confirmarea asincronă.

## Stare controlată

Transmiteți `open` și actualizați-l cu `onOpenChange` pentru a gestiona vizibilitatea aceluiași dialog în starea React. Callbackul primește valoarea booleană solicitată și detaliile evenimentului upstream, inclusiv `reason`, `event` și `cancel()`. Apelați `eventDetails.cancel()` pentru a respinge o modificare solicitată. `onOpenChangeComplete` se execută după finalizarea tranzițiilor de deschidere sau închidere.

```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>
  );
};
```

Pentru confirmarea asincronă, utilizați un `Button` cu handlerul acțiunii în loc de `AlertDialog.Close`. Mențineți `open` la valoarea true cât timp acțiunea este în așteptare, apelați `setOpen(false)` după ce reușește și afișați o eroare în dialog dacă eșuează.

## Compuneți cu butoane

Utilizați `render` pentru a oferi declanșatorului și controalelor de închidere stilul de buton Twenty UI. Părțile casetei de dialog furnizează butoanelor gestionarele de interacțiune și referințele lor.

```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>
);
```

Păstrați fiecare acțiune ca un singur control interactiv. Dacă încapsulați `Button` în propriul component, [transmiteți mai departe proprietățile și referința furnizate](https://docs.twenty.com/ro/ui/primitives/overview#custom-components).

## Declanșatoare detașate și acțiuni imperative

Creați o dată un handle cu `AlertDialog.createHandle\<Payload>()` și transmiteți-l către `handle` pe `Root` și pe fiecare `Trigger` detașat. `payload` tipizat al unui declanșator este disponibil pentru funcția de randare copil a rădăcinii. Un handle acceptă și `open(triggerId)`, `openWithPayload(payload)`, `close()` și getterul `isOpen` cât timp rădăcina sa este montată. Transmiteți un ID de declanșator corespunzător către `open` sau `null` pentru a deschide fără un declanșator. Apelați metode imperative din handlere de evenimente sau efecte.

`Root.actionsRef` expune `close()` și `unmount()`. Pentru o animație de închidere controlată extern, apelați `eventDetails.preventUnmountOnClose()` în `onOpenChange`, apoi apelați `actionsRef.current?.unmount()` după finalizarea animației. Părțile stilizate obișnuite își gestionează propriile tranziții fără aceste acțiuni imperative.

## Dimensionare și portaluri

`Popup.size` acceptă `sm`, `md`, `lg`, `xl` și `fullscreen` și are implicit valoarea `md`. Dimensiunea și aspectul aparțin suprafeței AlertDialog și nu trebuie să corespundă presetărilor Dialog.

`Portal.container` are implicit containerul portalului din cea mai apropiată temă. Fără unul, Base UI utilizează destinația implicită a portalului, în mod normal `document.body`. Un element explicit, o rădăcină shadow sau un ref înlocuiește acea destinație. Un `null` explicit amână montarea până când este disponibil un container. Base UI rezolvă un ref al cărui `current` este `null` folosind destinația sa implicită; utilizați `container={null}` când montarea trebuie să aștepte.

Conținutul portalizat păstrează contextul temei. `Portal` și `Viewport` moștenesc direcția de text furnizată, cu excepția cazului în care setați explicit `dir`. Setați `Portal.keepMounted` pentru a păstra conținutul montat și starea formularului cât timp este închis.

## Focalizare și închidere

Alerta reține focalizarea, blochează interacțiunea din exterior și blochează derularea paginii cât timp este deschisă. Escape solicită închiderea; clicul în exterior nu o solicită. Pentru a preveni închiderea prin Escape, anulați modificarea `escape-key` în `onOpenChange`. Oferiți întotdeauna o acțiune vizibilă Anulare sau Închidere.

Implicit, focalizarea se mută la primul control accesibil cu Tab sau la fereastra pop-up pentru o deschidere prin atingere. Puneți prima acțiunea cea mai puțin distructivă sau utilizați `Popup.initialFocus` pentru a o selecta. Focalizarea revine la declanșator sau la elementul focalizat anterior când alerta se închide. Utilizați `Popup.finalFocus` când o acțiune reușită elimină acea țintă. Ambele proprietăți de focalizare acceptă o valoare booleană, un ref de element sau un callback pentru tipul de interacțiune, conform contractului upstream.

## Proprietăți

Referința este generată din tipurile publice ale componentei. Atributele native, inclusiv numele accesibile și gestionarii de evenimente, sunt acceptate și pentru părțile care redau elemente.

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