---
title: Dialog
description: A popup that opens on top of the entire page.

---

<ComponentPreview name="p-dialog-1" />

## Usage

```tsx
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogPanel,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "mako-ui/components/dialog"
```

```tsx
<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogPopup>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <DialogPanel>Content</DialogPanel>
    <DialogFooter>
      <DialogClose>Close</DialogClose>
    </DialogFooter>
  </DialogPopup>
</Dialog>
```

## API Reference

### Dialog

Root component.

### DialogTrigger

Trigger button that opens the dialog.

### DialogCreateHandle

Creates a handle for detached dialog triggers. Use it when the trigger and popup need to be coordinated across different parts of the tree.

### DialogPopup

Popup container that displays the dialog content. Also exported as `DialogContent`.

| Prop                  | Type                        | Default | Description                                      |
| --------------------- | --------------------------- | ------- | ------------------------------------------------ |
| `showCloseButton`     | `boolean`                   | `true`  | When true, displays a close button in the top-right corner |
| `bottomStickOnMobile` | `boolean`                   | `true`  | When true, sticks to the bottom of the screen on mobile devices |
| `closeProps`          | `CloseProps`        | -       | Props forwarded to the internal close button, useful for overriding `aria-label` |
| `portalProps`         | `PortalProps`       | -       | Props forwarded to the internal portal (`keepMounted`, `container`, etc.) |

### DialogHeader

Container for the dialog title and description. Supports the `render` prop for polymorphic composition (e.g. `render={<Link href="/" />}`).

### DialogFooter

Footer section for action buttons. Supports the `render` prop for polymorphic composition.

| Prop        | Type                     | Default     | Description                                      |
| ----------- | ------------------------ | ----------- | ------------------------------------------------ |
| `variant`   | `"default" \| "bare"`    | `"default"` | Controls the footer styling. `default` includes border and background, `bare` removes them |

**Example:**

```tsx
// Default variant (with border and background)
<DialogFooter>
  <DialogClose>Cancel</DialogClose>
  <Button>Save</Button>
</DialogFooter>

// Bare variant (no border or background)
<DialogFooter variant="bare">
  <DialogClose>Cancel</DialogClose>
  <Button>Save</Button>
</DialogFooter>
```

### DialogTitle

Title component.

### DialogDescription

Description component.

### DialogPanel

Scrollable content container. Automatically wraps content in a `ScrollArea` component. Supports the `render` prop for polymorphic composition.

| Prop         | Type      | Default | Description                                      |
| ------------ | --------- | ------- | ------------------------------------------------ |
| `scrollFade` | `boolean` | `true`  | When true, shows a fade effect at scroll edges   |

**Example:**

```tsx
<DialogPanel>
  {/* Long content that will scroll if it exceeds the dialog height */}
  <div>...</div>
</DialogPanel>
```

### DialogClose

Close button component.

### DialogPortal

Portal component for rendering outside the DOM hierarchy.

### DialogBackdrop

Backdrop/overlay component. Also exported as `DialogOverlay`.

### DialogViewport

Viewport component for positioning.

## Examples

### Open from a Menu

<ComponentPreview name="p-dialog-2" />

### Dialog with Bare Footer

<ComponentPreview name="p-dialog-6" />

### Dialog with scroll inside

<ComponentPreview name="p-dialog-5" />

### Nested Dialogs

<ComponentPreview name="p-dialog-3" />

### Close Confirmation

<ComponentPreview name="p-dialog-4" />