# ConfirmDialogProvider

> App-wide confirmations through one hook: wrap the app in `ConfirmDialogProvider`, then call `useConfirm().confirm({...})` anywhere.

## Facts

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

## Guidelines

**Options**: `title`, `description`, `confirmText` (default "Confirm"), `cancelText` (default "Cancel"), `variant` (`default` | `destructive`), and `onConfirm` (may return a promise — the action shows a spinner until it settles, then the dialog closes).

**Destructive treatment**: a 48px round red tile with `AlertTriangle`, and a red action button.

**Write it like this**: a specific title with the object's name ("Disconnect claire@northwind.io?"), the consequence in the description ("Its 2 running campaigns pause until you connect another sender."), and verbs on both buttons ("Keep connected" / "Disconnect").

## API

```ts
export declare function ConfirmDialogProvider({ children }: {
    children: ReactNode;
}): JSX.Element;
export declare function useConfirm(): any;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function Asker() {
  var confirm = DC.useConfirm().confirm;
  React.useEffect(function () {
    confirm({ title: "Disconnect claire@northwind.io?", description: "Its 2 running campaigns pause until you connect another sender.", confirmText: "Disconnect", cancelText: "Keep connected", variant: "destructive", onConfirm: function () {} });
  }, []);
  return h(DC.Button, { variant: "outline" }, "Disconnect mailbox");
}
function App() { return h(DC.ConfirmDialogProvider, null, h(Asker)); }
  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.
- [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`).
- [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`).