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

# مربع الحوار

> اعرض مهمة مركزة فوق الصفحة الحالية.

## نظرة عامة

استخدم `Dialog` للنماذج والتفاصيل والمهام الأخرى التي تُفتح فوق الصفحة. يدير التركيز والإغلاق باستخدام لوحة المفاتيح والنقرات خارجها والتمرير. استخدم [AlertDialog](https://docs.twenty.com/ar/ui/primitives/surfaces/alert-dialog.md) عندما يجب على المستخدم الاستجابة صراحةً لقرار ما.

واجهة برمجة التطبيقات هذه مخصّصة لـ Twenty UI المستقل وتطبيق مضيف Twenty. يجب أن تستخدم المكونات الأمامية [`openCommandConfirmationModal`](https://docs.twenty.com/ar/developers/extend/apps/layout/front-components#host-communication-api) من SDK بدلًا من عرض `Dialog` أو `AlertDialog` مباشرةً. تُحظر أيضًا مربعات حوار المتصفح الأصلية والنوافذ المنبثقة في عارض المكونات الأمامية.

**Light**

[مثال على Dialog (light)](https://storybook.twenty.com/iframe.html?id=ui-surfaces-dialog--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال على Dialog (dark)](https://storybook.twenty.com/iframe.html?id=ui-surfaces-dialog--display\&viewMode=story\&globals=colorScheme:dark)

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

## استخدام

### الحالة غير المتحكم بها

يتولى `Root` الظهور افتراضيًا. عيّن `defaultOpen` لحالته الأولية. تؤدي المشغلات وعناصر تحكم الإغلاق ومفتاح Escape والنقرات الخارجية إلى تحديث تلك الحالة.

```tsx theme={null}
import { Button, Field, Input } from 'twenty-ui/primitives/input';
import { Dialog } from 'twenty-ui/primitives/surfaces';

export const AccountDialog = () => (
  <Dialog.Root defaultOpen={false}>
    <Dialog.Trigger render={<Button>Edit account</Button>} />
    <Dialog.Portal>
      <Dialog.Backdrop />
      <Dialog.Viewport>
        <Dialog.Popup>
          <Dialog.Header>
            <Dialog.Title>Edit account</Dialog.Title>
            <Dialog.Description>Update the account details.</Dialog.Description>
          </Dialog.Header>
          <Dialog.Body>
            <Field.Root name="company">
              <Field.Label>Company name</Field.Label>
              <Input defaultValue="Acme" />
            </Field.Root>
          </Dialog.Body>
          <Dialog.Footer>
            <Dialog.Close render={<Button variant="outline">Close</Button>} />
            <Dialog.Close render={<Button>Save</Button>} />
          </Dialog.Footer>
        </Dialog.Popup>
      </Dialog.Viewport>
    </Dialog.Portal>
  </Dialog.Root>
);
```

## البنية

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

| الجزء | الهدف الأصلي وref |
| - | - |
| `Root` | ينسق الظهور والسلوك النمطي. لا يعرض عقدة DOM ولا يقبل سمات أصلية أو DOM ref. |
| `المشغّل` | زر افتراضيًا. يفتح مربع الحوار ويوفّر هدفًا لاستعادة التركيز. |
| `Portal` | عنصر div للبوابة. يدير حاوية الوجهة وما إذا كان المحتوى المغلق يبقى مركبًا. |
| `Backdrop` | عنصر div للخلفية أسفل النافذة المنبثقة. اختياري؛ احذفه عند عدم الحاجة إلى خلفية مرئية. |
| `Viewport` | عنصر div للتموضع حول النافذة المنبثقة. |
| `Popup` | عنصر div لمربع الحوار. يدير المحتوى والحجم وأهداف التركيز ودلالات مربع الحوار. |
| `العنوان` | عنصر `h2` افتراضيًا. يوفّر الاسم المتاح. وفّر `aria-label` على `Popup` عند حذفه. |
| `Description` | فقرة افتراضيًا. يربط النص الداعم بمربع الحوار. |
| `Header`، `Body`، `Footer` | عناصر div اختيارية لترتيب العناوين والمحتوى والإجراءات. |
| `إغلاق` | زر افتراضيًا. يوفر إجراء إغلاق مرئيًا، بما في ذلك لقارئات الشاشة اللمسية. |

جمّع `Portal` و`Backdrop` و`Viewport` و`Popup` صراحةً. يقبل كل جزء من DOM سماته الأصلية ومعالجاته و`className` و`style` وref وتركيب `render` الخاصة به. يستهدف ref العنصر المعروض لذلك الجزء. لا ينشئ `Popup` بوابة أو خلفية أو منفذ عرض.

## الحالة المتحكم بها

مرر `open` و`onOpenChange` عندما يتولى التطبيق الظهور. يتلقى رد الاتصال الحالة المطلوبة وتفاصيل حدث Base UI، بما فيها `reason` و`event` و`trigger` و`cancel()`. حدّث الحالة لقبول تغيير ما، أو استدعِ `eventDetails.cancel()` لرفضه. يعمل `onOpenChangeComplete` عند انتهاء حركة الفتح أو الإغلاق.

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

export const AccountDialog = () => {
  const [open, setOpen] = useState(false);

  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger render={<Button>Edit account</Button>} />
      <Dialog.Portal>
        <Dialog.Backdrop />
        <Dialog.Viewport>
          <Dialog.Popup>
            <Dialog.Header>
              <Dialog.Title>Edit account</Dialog.Title>
              <Dialog.Description>
                Update the account details.
              </Dialog.Description>
            </Dialog.Header>
            <Dialog.Body>
              <Field.Root name="company">
                <Field.Label>Company name</Field.Label>
                <Input defaultValue="Acme" />
              </Field.Root>
            </Dialog.Body>
            <Dialog.Footer>
              <Dialog.Close render={<Button variant="outline">Close</Button>} />
              <Dialog.Close render={<Button>Save</Button>} />
            </Dialog.Footer>
          </Dialog.Popup>
        </Dialog.Viewport>
      </Dialog.Portal>
    </Dialog.Root>
  );
};
```

بالنسبة إلى نموذج غير متزامن، أبقِ مربع الحوار مفتوحًا أثناء الإرسال. أغلقه بعد النجاح واعرض حالات الفشل داخل مربع الحوار.

## التركيب

يقبل `Trigger` و`Close` ‎`render` للتركيب مع `Button`، كما هو موضح أعلاه. يجب أن تقوم الأغلفة المخصصة [بتمرير الخصائص والمراجع الموفرة](https://docs.twenty.com/ar/ui/primitives/overview#custom-components). تحافظ أجزاء DOM على أسماء الفئات والأنماط وعقود `render` للاستدعاء الواعية بالحالة في Base UI. يحتفظ `Header` و`Body` و`Footer` بتخطيطها المنسق وتركيب div الأصلي.

ضمّن `Dialog.Root` آخر داخل نافذة منبثقة لفتح مربع حوار ثانٍ. تؤدي إغلاق مربع الحوار المتداخل إلى إعادة التركيز إلى مشغله في الأصل.

لفتح مربع حوار واحد من مشغلات خارج `Root`، أنشئ مقبضًا مرة واحدة باستخدام `Dialog.createHandle\<TPayload>()` ومرّره إلى `handle` في كلٍّ من `Root` و`Trigger`. تتوفر قيم `payload` الخاصة بـ Trigger في دالة العرض الخاصة بـ `Root`. يكشف `Dialog.Handle` والنوع العام `DialogHandle` عن عقد المقبض المثبت:

| العضو | الغرض |
| - | - |
| `open(triggerId)` | يفتح مع مشغل مطابق بوصفه المشغل النشط. |
| `open(null)` | يفتح دون إقران مشغل. |
| `openWithPayload(payload)` | يفتح بحمولة محددة النوع ومن دون مشغل مقترن. |
| `close()` | يطلب الإغلاق. |
| `isOpen` | يقرأ ما إذا كان مربع الحوار المقترن مفتوحًا. |

لا تسري الإجراءات الأمرية إلا أثناء تركيب Root المقترن. يكشف `actionsRef` الخاص بـ Root أيضًا عن `close()` و`unmount()` للتحكم الصريح في الانتقال. للتحكم في حركة إغلاق خارجية، استدعِ `eventDetails.preventUnmountOnClose()` في `onOpenChange`، ثم استدعِ إجراء `unmount()` عند انتهاء الحركة.

يستخدم `Title` ‏`Heading` ويكون افتراضيًا `h2` بخط كبير ولون نص أساسي ومحاذاة مركزية وتباعد-4 أسفله. استخدم `level` لتغيير مستوى العنوان بصورة مستقلة عن `size`، أو `color` لتغيير لون نصه. تُمرر `className` و`style` والمراجع و`render` الأصلية إلى العنوان. أبقِ عنصر عنوان عند استخدام `render`. يكون `Description` في المنتصف مثل `Title`؛ بينما يُبقي AlertDialog كليهما بمحاذاة إلى اليسار.

لا يحتوي `Popup` على حشوة. يوفر `Header` و`Body` و`Footer` المسافة البادئة، لذا يكون المحتوى الموضوع مباشرةً في `Popup` ملاصقًا لحوافه.

## التركيز والتمرير والإغلاق

يتحكم `Root.modal` في حدود التفاعل:

| القيمة | تركيز | تمرير الصفحة والتفاعل الخارجي |
| - | - | - |
| `true` (افتراضي) | محصور داخل مربع الحوار | يُحظر تمرير الصفحة والتفاعل الخارجي. |
| `"trap-focus"` | محصور داخل مربع الحوار | يبقى تمرير الصفحة والتفاعل خارجها متاحين. |
| `خاطئ` | يمكنه مغادرة مربع الحوار | يبقى تمرير الصفحة والتفاعل الخارجي متاحين. |

احذف `Backdrop` عند عدم الحاجة إلى خلفية مرئية. لمربع حوار غير نمطي ينبغي أن يمرر منفذ عرضه أحداث المؤشر إلى الصفحة، استخدم `\<Dialog.Viewport data-backdrop-hidden="true">`؛ ويبقى Popup تفاعليًا. لا يؤدي حذف الخلفية المرئية وحده إلى تغيير `Root.modal`.

عيّن `Popup.initialFocus` أو `Popup.finalFocus` إلى مرجع أو دالة استدعاء لاختيار أهداف التركيز؛ يعطّل `false` نقل التركيز التلقائي هذا. تتلقى ردود اتصال التركيز نوع التفاعل وتحتفظ بسلوك الإرجاع المنطقي والعنصر وnull وundefined الخاص بـ Base UI. يؤدي الإغلاق عادةً إلى استعادة التركيز إلى المشغل أو العنصر الذي كان مُركزًا عليه سابقًا.

يمنع `Root.disablePointerDismissal` النقرات الخارجية من طلب الإغلاق. لمنع الإغلاق باستخدام Escape، ألغِ تغيير `escape-key` في `onOpenChange`. وفّر دائمًا طريقة مرئية لإغلاق مربع حوار نمطي.

## الأحجام والبوابات

يقبل `Popup.size` القيم `sm` و`compact` و`md` و`lg` و`xl` و`fullscreen`، وتكون قيمته الافتراضية `md`. يُمرّر المحتوى الطويل داخل النافذة المنبثقة. يُقيَّد العرض بمنفذ العرض.

عيّن `Portal.container` لاختيار وجهة:

| القيمة | الدقة |
| - | - |
| محذوف أو `undefined` | يستخدم أقرب حاوية نسق ذات نطاق. عند عدم وجود واحدة، يستخدم Base UI البوابة الأصل أو جسم المستند. |
| عنصر أو `ShadowRoot` | يستخدم تلك الوجهة الصريحة بدلًا من نطاق النسق. |
| Ref | يحلّ Base UI عنصره الحالي. يعود ref الذي تكون قيمته الحالية null إلى البوابة الأصل أو جسم المستند. |
| `null` | ينتظر دون تركيب. وفّر وجهة في عرض لاحق للتركيب. |

يحتفظ `Portal.keepMounted` بالمحتوى وحالة النموذج أثناء الإغلاق. يحمل `Viewport` و`Popup` اتجاه النص المقدّم إلى حاوية خارجية؛ وتكون لخصائص `dir` الصريحة الخاصة بهما الأولوية. من دون موفر اتجاه أو `dir` صريح، يرثان الاتجاه من الوجهة. راجع [إعداد النسق](https://docs.twenty.com/ar/ui/theming.md) و[DirectionProvider](https://docs.twenty.com/ar/ui/primitives/layout/direction-provider.md).

خصّص `Backdrop` و`Viewport` عبر خصائصهما الخاصة. تُطبّق سماتهما الأصلية ومعالجاتهما وrefs و`render` على تلك العناصر بصورة مستقلة عن Popup. يبقي `forceRender` الخاص بـ Backdrop خلفية مربع الحوار المتداخل مرئية عند الحاجة. تبقى حالة الفتح والانتقال في Base UI متاحة للأنماط الواعية بالحالة وردود اتصال العرض.

## الترحيل

غلّف محتوى `Dialog.Popup` الحالي داخل `Dialog.Portal` و`Dialog.Viewport`، وأضف `Dialog.Backdrop` شقيقًا داخل Portal. انقل `container` و`keepMounted` من Popup إلى Portal. انقل خصائص `backdrop` السابقة إلى Backdrop؛ واستبدل `backdrop={false}` بحذف Backdrop. انقل `viewportProps` إلى Viewport، مع الاحتفاظ بـ `data-backdrop-hidden="true"` عندما يجب على منفذ العرض تمرير أحداث المؤشر الخارجية. أبقِ `size` و`initialFocus` و`finalFocus` وسمات النافذة المنبثقة الأصلية وrefs النافذة المنبثقة على Popup. تُزال خصائص تجميع Popup الموحّدة.

يحتفظ Root وTrigger وClose وTitle وDescription وHeader وBody وFooter والمقابض الحالية بأدوارها. تُصدَّر خصائص الأجزاء العامة والحالة والإجراءات وأنواع تفاصيل الأحداث من `twenty-ui/primitives/surfaces`.

## الإزاحة

### Dialog.Root

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

A ref to imperative actions.

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

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

Parts or a render function receiving the active trigger payload. Root renders no DOM node.

**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.disablePointerDismissal** `boolean` (default: false)

Whether to prevent the dialog from closing on outside presses.
For non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it.

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

Connects detached triggers and imperative dialog actions.

**Root.modal** `boolean | "trap-focus"` (default: true)

Determines if the dialog enters a modal state when open.

* `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.
* `false`: user interaction with the rest of the document is allowed.
* `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.

When `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so
touch screen readers can escape the popup.

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

Receives the requested state and Base UI event details, including reason, event, trigger and cancel().

**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).

### Dialog.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** `DialogHandle\<Payload\>`

A handle to associate the trigger with a dialog.
Can be created with the Dialog.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.ref** `((((instance: HTMLButtonElement | null) =\> void | (() =\> VoidOrUndefinedOnly)) | RefObject\<HTMLButtonElement | null\>) & (((instance: HTMLElement | null) =\> void | (() =\> VoidOrUndefinedOnly)) | RefObject\<...\>)) | null`

Ref to the trigger button, or the element supplied through render.

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

### Dialog.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. Omit to use the nearest theme scope, then the parent portal or document body. Explicit null defers mounting; an element, ShadowRoot or ref keeps Base UI resolution.

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

Keeps the portal and its content mounted while closed.

**Portal.ref** `Ref\<HTMLDivElement\>`

Ref to the portal div, or the element supplied through render.

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

Composes the portal element. Native props and handlers target it.

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

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

Renders the backdrop even when this dialog is nested.

**Backdrop.ref** `Ref\<HTMLDivElement\>`

Ref to the backdrop div, or the element supplied through render.

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

### Dialog.Viewport

**Viewport.children** `ReactNode`

Popup and any other content within the positioning 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.ref** `Ref\<HTMLDivElement\>`

Ref to the viewport div, or the element supplied through render.

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

### Dialog.Popup

**Popup.children** `ReactNode`

Dialog content. Compose inside Viewport and Portal; Popup does not create those parts or a Backdrop.

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

Controls focus restoration on closing. Accepts a boolean, element ref or callback receiving the interaction type.

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

Controls focus on opening. Accepts a boolean, element ref or callback receiving the interaction type.

**Popup.ref** `Ref\<HTMLDivElement\>`

Ref to the popup div, or the element supplied through render.

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

Composes the popup element while retaining native props, handlers, dialog semantics and focus behavior.

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

Width of the dialog, 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.

### Dialog.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.color** `"primary" | "secondary" | "tertiary"` (default: primary)

Theme font color. Defaults to `primary`.

**Title.level** `1 | 2 | 3 | 4 | 5 | 6` (default: 2)

Semantic heading level, from `h1` through `h6`. Does not change the visual size. Defaults to `2`.

**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.size** `"lg" | "md" | "sm" | "xl" | "xs" | "xxl"` (default: lg)

Visual font size, independent of the heading level. Defaults to `lg`.

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

### Dialog.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.ref** `Ref\<HTMLParagraphElement\>`

Ref to the description paragraph, or the element supplied through render.

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

### Dialog.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.ref** `Ref\<HTMLButtonElement\>`

Ref to the close button, or the element supplied through render.

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

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

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

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