# Dialog

Modal dialog that overlays the page content

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import {
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  Input,
  Label,
} from "@databricks/appkit-ui/react"

export default function DialogExample() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Edit Profile</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here. Click save when you're done.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>
            <Input
              id="name"
              defaultValue="Foo Bar"
              className="col-span-3"
            />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="username" className="text-right">
              Username
            </Label>
            <Input
              id="username"
              defaultValue="foobar"
              className="col-span-3"
            />
          </div>
        </div>
        <DialogFooter>
          <Button type="submit">Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

```

## Dialog[​](#dialog-1 "Direct link to Dialog")

Modal dialog that overlays the page content

**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)

### Props[​](#props "Direct link to Props")

| Prop           | Type                        | Required | Default | Description |
| -------------- | --------------------------- | -------- | ------- | ----------- |
| `open`         | `boolean`                   |          | -       | -           |
| `defaultOpen`  | `boolean`                   |          | -       | -           |
| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |
| `modal`        | `boolean`                   |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Dialog } from '@databricks/appkit-ui';

<Dialog /* props */ />

```

## DialogClose[​](#dialogclose "Direct link to DialogClose")

Button that closes the dialog

**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)

### Props[​](#props-1 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { DialogClose } from '@databricks/appkit-ui';

<DialogClose /* props */ />

```

## DialogContent[​](#dialogcontent "Direct link to DialogContent")

Main content area of the dialog

**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)

### Props[​](#props-2 "Direct link to Props")

| Prop                   | Type                                                              | Required | Default | Description                                                                                                                                                                               |
| ---------------------- | ----------------------------------------------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `forceMount`           | `true`                                                            |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.                                                                     |
| `asChild`              | `boolean`                                                         |          | -       | -                                                                                                                                                                                         |
| `onEscapeKeyDown`      | `((event: KeyboardEvent) => void)`                                |          | -       | Event handler called when the escape key is down. Can be prevented.                                                                                                                       |
| `onPointerDownOutside` | `((event: PointerDownOutsideEvent) => void)`                      |          | -       | Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.                                                                          |
| `onFocusOutside`       | `((event: FocusOutsideEvent) => void)`                            |          | -       | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.                                                                                            |
| `onInteractOutside`    | `((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)` |          | -       | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented. |
| `onOpenAutoFocus`      | `((event: Event) => void)`                                        |          | -       | Event handler called when auto-focusing on open. Can be prevented.                                                                                                                        |
| `onCloseAutoFocus`     | `((event: Event) => void)`                                        |          | -       | Event handler called when auto-focusing on close. Can be prevented.                                                                                                                       |
| `showCloseButton`      | `boolean`                                                         |          | `true`  | -                                                                                                                                                                                         |

### Usage[​](#usage-2 "Direct link to Usage")

```tsx
import { DialogContent } from '@databricks/appkit-ui';

<DialogContent /* props */ />

```

## DialogDescription[​](#dialogdescription "Direct link to DialogDescription")

Description text for the dialog

**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)

### Props[​](#props-3 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-3 "Direct link to Usage")

```tsx
import { DialogDescription } from '@databricks/appkit-ui';

<DialogDescription /* props */ />

```

## DialogFooter[​](#dialogfooter "Direct link to DialogFooter")

Footer section of the dialog

**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)

### Props[​](#props-4 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-4 "Direct link to Usage")

```tsx
import { DialogFooter } from '@databricks/appkit-ui';

<DialogFooter /* props */ />

```

## DialogHeader[​](#dialogheader "Direct link to DialogHeader")

Header section of the dialog

**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)

### Props[​](#props-5 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-5 "Direct link to Usage")

```tsx
import { DialogHeader } from '@databricks/appkit-ui';

<DialogHeader /* props */ />

```

## DialogOverlay[​](#dialogoverlay "Direct link to DialogOverlay")

Dimmed overlay behind the dialog

**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)

### Props[​](#props-6 "Direct link to Props")

| Prop         | Type      | Required | Default | Description                                                                                                           |
| ------------ | --------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
| `forceMount` | `true`    |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| `asChild`    | `boolean` |          | -       | -                                                                                                                     |

### Usage[​](#usage-6 "Direct link to Usage")

```tsx
import { DialogOverlay } from '@databricks/appkit-ui';

<DialogOverlay /* props */ />

```

## DialogPortal[​](#dialogportal "Direct link to DialogPortal")

Portal container for dialog content

**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)

### Props[​](#props-7 "Direct link to Props")

| Prop         | Type                                  | Required | Default | Description                                                                                                           |
| ------------ | ------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
| `container`  | `Element \| DocumentFragment \| null` |          | -       | Specify a container element to portal the content into.                                                               |
| `forceMount` | `true`                                |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |

### Usage[​](#usage-7 "Direct link to Usage")

```tsx
import { DialogPortal } from '@databricks/appkit-ui';

<DialogPortal /* props */ />

```

## DialogTitle[​](#dialogtitle "Direct link to DialogTitle")

Title text for the dialog

**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)

### Props[​](#props-8 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-8 "Direct link to Usage")

```tsx
import { DialogTitle } from '@databricks/appkit-ui';

<DialogTitle /* props */ />

```

## DialogTrigger[​](#dialogtrigger "Direct link to DialogTrigger")

Button that opens the dialog

**Source:** [`packages/appkit-ui/src/react/ui/dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/dialog.tsx)

### Props[​](#props-9 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-9 "Direct link to Usage")

```tsx
import { DialogTrigger } from '@databricks/appkit-ui';

<DialogTrigger /* props */ />

```