# Dialog

> A modal for focused tasks that need an answer before going on; opens in 250ms from 96% scale and closes in 150ms (`.t-modal`).

## Facts

- **Product**: Max
- **Family**: Overlays
- **Global**: `window.DigitalCrew.Dialog`
- **Source**: `max-agent: src/components/ui/dialog.tsx`
- **Import in the app**: `import { Dialog } from "@/components/ui/dialog";`
- **Live preview**: /design/components/dialog/preview.html
- **Page**: /design/components/dialog

## Guidelines

**Use it for** short forms (rename, invite, connect) and previews. Confirmations of irreversible actions use [**AlertDialog**](/design/components/alert-dialog.md) or `useConfirm`; long or multi-step editing belongs in a [**Sheet**](/design/components/sheet.md) or a page.

**What you provide**: `open`/`onOpenChange` or a `DialogTrigger`; `DialogContent` with a `DialogHeader` (`DialogTitle` + `DialogDescription`), the body, and a `DialogFooter` with the main action last. `showCloseButton={false}` hides the corner ×.

**Anatomy**: `background` surface, `border`, `radius-lg`, 24px padding, 16px gap, `shadow-lg`, max 512px wide from `sm` (full width minus 32px below it); overlay black at 50%. Footer buttons stack in reverse on phones so the main action sits on top.

## API

```ts
declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): any;
declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): any;
declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): any;
declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): any;
declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): any;
declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
    showCloseButton?: boolean;
}): any;
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): any;
declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): any;
declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): any;
declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): any;
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h(DC.Dialog, { defaultOpen: true },
    h(DC.DialogTrigger, { asChild: true }, h(DC.Button, { variant: "outline" }, "Rename list")),
    h(DC.DialogContent, { onOpenAutoFocus: function (e) { e.preventDefault(); } },
      h(DC.DialogHeader, null,
        h(DC.DialogTitle, null, "Rename list"),
        h(DC.DialogDescription, null, "Everyone in the workspace sees the new name.")),
      h("div", { className: "grid gap-2" },
        h(DC.Label, { htmlFor: "dl" }, "Name"),
        h(DC.Input, { id: "dl", defaultValue: "Fintech CFOs — EMEA" })),
      h(DC.DialogFooter, null,
        h(DC.DialogClose, { asChild: true }, h(DC.Button, { variant: "outline" }, "Cancel")),
        h(DC.Button, null, "Save"))));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Overlays

- [AlertDialog](/design/components/alert-dialog.md): A blocking confirmation for irreversible or costly actions; same motion and surface as **Dialog**, no close ×, no click-outside dismissal.
- [Command](/design/components/command.md): A keyboard-first search-and-act list (cmdk); the ⌘K menu and the core of every searchable picker.
- [ConfirmDialogProvider](/design/components/confirm-dialog-provider.md): App-wide confirmations through one hook: wrap the app in `ConfirmDialogProvider`, then call `useConfirm().confirm({...})` anywhere.
- [DiscardChangesDialog](/design/components/discard-changes-dialog.md): An alert dialog that asks the user to confirm throwing away unsaved edits.
- [Drawer](/design/components/drawer.md): A panel that slides in from the bottom edge (or any edge), built on vaul, with a drag handle and swipe-to-dismiss.
- [DropdownMenu](/design/components/dropdown-menu.md): A menu of actions for one object, opening from a button; 250ms in from 97%, 150ms out to 99%.
- [Popover](/design/components/popover.md): A light panel anchored to its trigger; opens in 250ms from 97% scale (`.t-dropdown`).
- [Sheet](/design/components/sheet.md): A panel that slides in from an edge; opens in 400ms and closes in 350ms on the smooth-out ease (`--panel-*`).
- [Tooltip](/design/components/tooltip.md): A short ink label on hover or focus: `foreground` fill with `background` text, 12px, 150ms in after an 80ms delay, 50ms out (`.t-tt`).