# DiscardChangesDialog

> An alert dialog that asks the user to confirm throwing away unsaved edits.

## Facts

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

## Guidelines

**Use it for** leaving a form or closing an editor while there are unsaved changes. In Max, `DiscardChangesProvider` (`src/contexts/discard-changes-provider.tsx`) mounts it once and exposes `showDialog(onConfirm, onCancel?)`. Use that provider rather than mounting your own copy per form.

**What you provide**:
- `open` and `onOpenChange(open)`.
- `onConfirm()`: runs, then the dialog closes.
- Optional `onCancel()`: runs, then the dialog closes.

**Copy** (fixed in the component):
- Title: "Discard Changes?"
- Description: "You have unsaved changes. Are you sure you want to discard them? This action cannot be undone."
- Actions: "Cancel" and "Discard Changes".

**Anatomy**: the standard [`AlertDialog`](/design/components/alert-dialog.md) (overlay, centred content, header, footer). The confirm action is `bg-destructive text-white hover:bg-destructive/90`, and Cancel uses the outline style.

**Behaviour**: as an alert dialog it doesn't close on an outside click. Focus goes to Cancel when it opens. Escape only calls `onOpenChange(false)`; the provider treats that as a cancel. Motion is the [`AlertDialog`](/design/components/alert-dialog.md) enter and exit transition.

**Don't** reuse it to confirm deleting a record or other irreversible actions on data. Use [`ConfirmDialogProvider`](/design/components/confirm-dialog-provider.md) / `useConfirm` with copy that names the object.

## API

```ts
interface DiscardChangesDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onConfirm: () => void;
    onCancel?: () => void;
}
export declare function DiscardChangesDialog({ open, onOpenChange, onConfirm, onCancel, }: DiscardChangesDialogProps): JSX.Element;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    var s = React.useState(true), open = s[0], setOpen = s[1];
    return h("div", { className: "min-h-[272px] space-y-4" },
      h("div", { className: "space-y-1.5" },
        h(DC.Label, null, "Campaign name"),
        h(DC.Input, { defaultValue: "Q4 DACH logistics — CFO outreach" })),
      h("div", { className: "space-y-1.5" },
        h(DC.Label, null, "Opening line"),
        h(DC.Textarea, { rows: 3, defaultValue: "Hi {{first_name}}, saw Northwind is hiring three SDRs in Lyon…" })),
      h("div", { className: "flex gap-2" },
        h(DC.Button, { variant: "outline", onClick: function () { setOpen(true); } }, "Leave page"),
        h(DC.Button, null, "Save changes")),
      h(DC.DiscardChangesDialog, { open: open, onOpenChange: setOpen, onConfirm: function () {}, onCancel: function () {} }));
  }
  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.
- [Dialog](/design/components/dialog.md): A modal for focused tasks that need an answer before going on; opens in 250ms from 96% scale and closes in 150ms (`.t-modal`).
- [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`).