Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Dialog

Modal dialog that overlays the page content

## Example​

    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​

Modal dialog that overlays the page content

Source: `packages/appkit-ui/src/react/ui/dialog.tsx`

### Props​

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

### Usage​

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

    <Dialog /* props */ />

## DialogClose​

Button that closes the dialog

Source: `packages/appkit-ui/src/react/ui/dialog.tsx`

### Props​

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

### Usage​

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

    <DialogClose /* props */ />

## DialogContent​

Main content area of the dialog

Source: `packages/appkit-ui/src/react/ui/dialog.tsx`

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

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

    <DialogContent /* props */ />

## DialogDescription​

Description text for the dialog

Source: `packages/appkit-ui/src/react/ui/dialog.tsx`

### Props​

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

### Usage​

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

    <DialogDescription /* props */ />

## DialogFooter​

Footer section of the dialog

Source: `packages/appkit-ui/src/react/ui/dialog.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <DialogFooter /* props */ />

## DialogHeader​

Header section of the dialog

Source: `packages/appkit-ui/src/react/ui/dialog.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <DialogHeader /* props */ />

## DialogOverlay​

Dimmed overlay behind the dialog

Source: `packages/appkit-ui/src/react/ui/dialog.tsx`

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

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

    <DialogOverlay /* props */ />

## DialogPortal​

Portal container for dialog content

Source: `packages/appkit-ui/src/react/ui/dialog.tsx`

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

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

    <DialogPortal /* props */ />

## DialogTitle​

Title text for the dialog

Source: `packages/appkit-ui/src/react/ui/dialog.tsx`

### Props​

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

### Usage​

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

    <DialogTitle /* props */ />

## DialogTrigger​

Button that opens the dialog

Source: `packages/appkit-ui/src/react/ui/dialog.tsx`

### Props​

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

### Usage​

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

    <DialogTrigger /* props */ />