# Dialog

> Accessible modal on Radix, on the overlay surface. Composed of trigger, overlay, content, header and footer parts.

Section: Primitives. Docs: https://entrepta.vercel.app/docs/components/dialog

## Install

```bash
npx @entrepta/cli@latest add dialog
```

Files: `primitives/dialog.tsx`, `lib/overlay.ts`, `lib/icon.tsx`.
npm packages: `@phosphor-icons/react`, `@radix-ui/react-dialog`.
Comes with: `overlay-lib`, `icon-lib`.

## Usage

```tsx
import {
  Dialog, DialogTrigger, DialogContent,
  DialogHeader, DialogLabel, DialogTitle,
  DialogDescription, DialogFooter,
} from "@/components/entrepta/dialog"
import { Button } from "@/components/entrepta/button"

<Dialog>
  <DialogTrigger asChild>
    <Button variant="secondary">$ rm -rf project</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogLabel>danger zone</DialogLabel>
      <DialogTitle>
        Delete <em>project-name</em>?
      </DialogTitle>
      <DialogDescription>This cannot be undone.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="ghost">Cancel</Button>
      <Button>Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | `Icon \| ReactElement` | - | In front of the label (DialogLabel). From a server file, pass an element: icon={<RobotIcon />} |
| `open` | `boolean` | - | Controlled open state |
| `onOpenChange` | `(open: boolean) => void` | - | Callback when open state changes |
| `modal` | `boolean` | true | Whether to block interactions behind overlay |