# @askrjs/ui/dialog

> Published API exports for @askrjs/ui/dialog.

Source: [https://askrjs.com/docs/reference/api/ui/dialog](https://askrjs.com/docs/reference/api/ui/dialog)

Status: stable. Packages: @askrjs/ui/dialog.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 27 exports from the declarations shipped by @askrjs/ui.

### `Dialog`

```ts
Dialog: (props: DialogProps) => JSX.Element
```

Coordinates the Dialog trigger, portal, overlay, and content.

````tsx
```tsx
<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogPortal>
    <DialogOverlay />
    <DialogContent>Confirm action</DialogContent>
  </DialogPortal>
</Dialog>
```
````

### `DIALOG_A11Y_CONTRACT`

```ts
DIALOG_A11Y_CONTRACT: { readonly CONTENT_ROLE: "dialog"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly MODAL_ATTRIBUTE: "aria-modal"; readonly LABELLED_BY_ATTRIBUTE: "aria-labelledby"; readonly DESCRIBED_BY_ATTRIBUTE: "aria-describedby"; readonly TRIGGER_ATTRIBUTES: { readonly expanded: "aria-expanded"; readonly controls: "aria-controls"; }; }
```

Dialog accessibility contract.

### `DialogA11yContract`

```ts
DialogA11yContract: typeof DIALOG_A11Y_CONTRACT
```

Type of the Dialog A11y Contract object.

### `DialogClose`

```ts
DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }
```

Renders the `dialog-close` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `DialogCloseAsChildProps`

```ts
DialogCloseAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dialog Close.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `DialogCloseProps`

```ts
DialogCloseProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Dialog Close.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `DialogContent`

```ts
DialogContent: { (props: DialogContentProps): JSX.Element | null; (props: DialogContentAsChildProps): JSX.Element | null; }
```

Renders the `dialog-content` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `DialogContentAsChildProps`

```ts
DialogContentAsChildProps: BoxAsChildProps & DialogContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Dialog Content.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `role`: role?: "alertdialog" | "dialog" | undefined;

### `DialogContentOwnProps`

```ts
DialogContentOwnProps: {
  forceMount?: boolean;
  role?: 'dialog' | 'alertdialog';
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onPointerDownOutside?: (event: PointerEvent) => void;
  onInteractOutside?: (event: Event) => void;
  onDismiss?: () => void;
}
```

Own props for Dialog Content, before merging with native element attributes.

- `forceMount`: forceMount?: boolean | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

- `role`: role?: "alertdialog" | "dialog" | undefined;

### `DialogContentProps`

```ts
DialogContentProps: BoxProps<'div', HTMLDivElement> & DialogContentOwnProps
```

Props for Dialog Content.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `role`: role?: "alertdialog" | "dialog" | undefined;

### `DialogDescription`

```ts
DialogDescription: { (props: DialogDescriptionProps): JSX.Element; (props: DialogDescriptionAsChildProps): JSX.Element; }
```

Renders the `dialog-description` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `DialogDescriptionAsChildProps`

```ts
DialogDescriptionAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dialog Description.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `DialogDescriptionProps`

```ts
DialogDescriptionProps: BoxProps<'p', HTMLParagraphElement>
```

Props for Dialog Description.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLParagraphElement>;

### `DialogOverlay`

```ts
DialogOverlay: { (props: DialogOverlayProps): JSX.Element | null; (props: DialogOverlayAsChildProps): JSX.Element | null; }
```

Renders the `dialog-overlay` part of `dialog`.

With `@askrjs/themes/default`, the overlay is fully styled out of the box
with the shared backdrop token, blur, stacking, and fade animation. Standard
Dialog and AlertDialog usage requires no additional overlay CSS; customize
the theme tokens instead of applying a competing background class.

Supports polymorphic rendering via `asChild`.

### `DialogOverlayAsChildProps`

```ts
DialogOverlayAsChildProps: BoxAsChildProps & DialogOverlayOwnProps
```

Props for the `asChild` (polymorphic) rendering of Dialog Overlay.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

### `DialogOverlayOwnProps`

```ts
DialogOverlayOwnProps: {
  forceMount?: boolean;
}
```

Own props for Dialog Overlay, before merging with native element attributes.

- `forceMount`: forceMount?: boolean | undefined;

### `DialogOverlayProps`

```ts
DialogOverlayProps: BoxProps<'div', HTMLDivElement> & DialogOverlayOwnProps
```

Props for Dialog Overlay.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

### `DialogOwnProps`

```ts
DialogOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  modal?: boolean;
}
```

Own props for Dialog, before merging with native element attributes.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `modal`: modal?: boolean | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `DialogPortal`

```ts
DialogPortal: (props: DialogPortalProps) => JSX.Element | null
```

Renders a part of `dialog`.

### `DialogPortalProps`

```ts
DialogPortalProps: {
  children?: unknown;
}
```

Props for Dialog Portal.

- `children`: children?: unknown;

### `DialogProps`

```ts
DialogProps: DialogOwnProps
```

Props for Dialog.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `modal`: modal?: boolean | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `DialogTitle`

```ts
DialogTitle: { (props: DialogTitleProps): JSX.Element; (props: DialogTitleAsChildProps): JSX.Element; }
```

Renders the `dialog-title` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `DialogTitleAsChildProps`

```ts
DialogTitleAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dialog Title.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `DialogTitleProps`

```ts
DialogTitleProps: BoxProps<'h2', HTMLHeadingElement>
```

Props for Dialog Title.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLHeadingElement>;

### `DialogTrigger`

```ts
DialogTrigger: { (props: DialogTriggerProps): JSX.Element; (props: DialogTriggerAsChildProps): JSX.Element; }
```

Renders the `dialog-trigger` part of `dialog`.

Supports polymorphic rendering via `asChild`.

### `DialogTriggerAsChildProps`

```ts
DialogTriggerAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Dialog Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `DialogTriggerProps`

```ts
DialogTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Dialog Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/collapsible/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/dismissable-layer/index.md)