upstream-twenty/packages/twenty-docs/snippets/ui/generated/surfaces/alert-dialog.mdx

{/*
 * _____                    _
 *|_   _|_      _____ _ __ | |_ _   _
 *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
 *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
 *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
 *                              |___/
 *
 * This file is generated from the documentation data in packages/twenty-ui/generated.
 * To update it, edit the component prop types or design tokens in twenty-ui and run:
 *   npx nx generate:ui twenty-docs
 */}

### AlertDialog.Root

<ParamField body="Root.actionsRef" type="RefObject&lt;DialogRootActions | null&gt;">
  A ref to imperative actions.
  - `unmount`: Manually unmounts the alert dialog.
  Call this after any externally controlled closing animation finishes.
  - `close`: Closes the alert dialog imperatively when called.
</ParamField>

<ParamField body="Root.children" type="ReactNode | PayloadChildRenderFunction&lt;Payload&gt;">
  The content of the dialog.
  This can be a regular React node or a render function that receives the `payload` of the active trigger.
</ParamField>

<ParamField body="Root.defaultOpen" type="boolean" default="false">
  Whether the dialog is initially open.

  To render a controlled dialog, use the `open` prop instead.
</ParamField>

<ParamField body="Root.defaultTriggerId" type="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.
</ParamField>

<ParamField body="Root.handle" type="AlertDialogHandle&lt;Payload&gt;">
  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.
</ParamField>

<ParamField body="Root.onOpenChange" type="((open: boolean, eventDetails: AlertDialogRootChangeEventDetails) =&gt; void)">
  Event handler called when the alert dialog is opened or closed.
</ParamField>

<ParamField body="Root.onOpenChangeComplete" type="((open: boolean) =&gt; void)">
  Event handler called after any animations complete when the dialog is opened or closed.
</ParamField>

<ParamField body="Root.open" type="boolean">
  Whether the dialog is currently open.
</ParamField>

<ParamField body="Root.triggerId" type="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).
</ParamField>

### AlertDialog.Trigger

<ParamField body="Trigger.className" type="string | ((state: DialogTriggerState) =&gt; string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Trigger.handle" type="AlertDialogHandle&lt;Payload&gt;">
  A handle to associate the trigger with an alert dialog.
  Can be created with the AlertDialog.createHandle() method.
</ParamField>

<ParamField body="Trigger.id" type="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).
</ParamField>

<ParamField body="Trigger.nativeButton" type="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>`).
</ParamField>

<ParamField body="Trigger.payload" type="Payload">
  A payload to pass to the dialog when it is opened.
</ParamField>

<ParamField body="Trigger.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, DialogTriggerState&gt;">
  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.
</ParamField>

<ParamField body="Trigger.style" type="CSSProperties | ((state: DialogTriggerState) =&gt; CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### AlertDialog.Popup

<ParamField body="Popup.className" type="string | ((state: DialogPopupState) =&gt; string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Popup.container" type="HTMLElement | ShadowRoot | RefObject&lt;HTMLElement | ShadowRoot | null&gt; | null">
  Element the dialog is portaled into. Defaults to the theme's portal
  container.
</ParamField>

<ParamField body="Popup.finalFocus" type="boolean | RefObject&lt;HTMLElement | null&gt; | ((closeType: InteractionType) =&gt; 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.
</ParamField>

<ParamField body="Popup.initialFocus" type="boolean | RefObject&lt;HTMLElement | null&gt; | ((openType: InteractionType) =&gt; 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.
</ParamField>

<ParamField body="Popup.keepMounted" type="boolean">
  Keeps the dialog mounted in the DOM while it is closed.
</ParamField>

<ParamField body="Popup.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, DialogPopupState&gt;">
  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.
</ParamField>

<ParamField body="Popup.size" type="&quot;sm&quot; | &quot;md&quot; | &quot;lg&quot; | &quot;xl&quot; | &quot;fullscreen&quot;" default="md">
  Width of the dialog, or `fullscreen` to fill the viewport.
</ParamField>

<ParamField body="Popup.style" type="CSSProperties | ((state: DialogPopupState) =&gt; CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### AlertDialog.Title

<ParamField body="Title.className" type="string | ((state: DialogTitleState) =&gt; string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Title.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, DialogTitleState&gt;">
  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.
</ParamField>

<ParamField body="Title.style" type="CSSProperties | ((state: DialogTitleState) =&gt; CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### AlertDialog.Description

<ParamField body="Description.className" type="string | ((state: DialogDescriptionState) =&gt; string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Description.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, DialogDescriptionState&gt;">
  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.
</ParamField>

<ParamField body="Description.style" type="CSSProperties | ((state: DialogDescriptionState) =&gt; CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### AlertDialog.Close

<ParamField body="Close.className" type="string | ((state: DialogCloseState) =&gt; string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="Close.nativeButton" type="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>`).
</ParamField>

<ParamField body="Close.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, DialogCloseState&gt;">
  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.
</ParamField>

<ParamField body="Close.style" type="CSSProperties | ((state: DialogCloseState) =&gt; CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

### AlertDialog.Header

<ParamField body="Header.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, {}&gt;">
  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.
</ParamField>

### AlertDialog.Body

<ParamField body="Body.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, {}&gt;">
  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.
</ParamField>

### AlertDialog.Footer

<ParamField body="Footer.render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, {}&gt;">
  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.
</ParamField>