# Dialog

Centred modal for confirmations and short decisions. The backdrop darkens first, the panel rises with its title, message and actions, and on close it fades out in place.

> Composed · Free · Overlays — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add dialog
```

## Import

```tsx
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from "@/components/ui/dialog/dialog";
```

## Variants

- `confirm` — Confirm: `npx @lumioui/cli add dialog-confirm`

## Props

### Dialog

| Prop | Type | Notes |
| --- | --- | --- |
| `open?` | `boolean` | Controlled open state. Omit for uncontrolled usage with defaultOpen. |
| `defaultOpen?` | `boolean` | Uncontrolled initial open state. Default false. |
| `onOpenChange?` | `(open: boolean) => void` | — |
| `children` | `React.ReactNode` | — |

### DialogContent

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |
| `material?` | `"solid" | "glass"` | Surface material. "solid" (default) is the opaque popover surface,  legible in light and dark over any screen. "glass" opts into liquid  glass; use it only when the dialog floats over photos or video. |

### DialogClose

| Prop | Type | Notes |
| --- | --- | --- |
| `children` | `React.ReactElement<DialogCloseChildProps>` | — |
| `className?` | `string` | — |

Source: https://lumioui.com/components/dialog