# Confirm Dialog

> Asks before a destructive or hard-to-undo action.

Component · Overlays · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/ConfirmDialog/)

Asks before a destructive or hard-to-undo action. Focus starts on Cancel; Esc cancels.

Props: `open`, `title` (a question naming the thing), `text` (what happens), `danger`, `icon`, `confirmLabel` (a verb: "Delete domain", never "OK"), `cancelLabel`, `confirmText` (type-to-confirm), `onConfirm`, `onCancel`.

- Prefer undo over confirm: removing a list item is instant with an Undo toast; confirm only when undo is impossible or the blast radius is large.
- Use `confirmText` only for irreversible deletes of whole things (a domain, a workspace).
- Renders into document.body, so it sits above every stacking context.

## Example

```tsx
import { ConfirmDialog } from "@twentyfirstmedia/pro";

function App() {
  return (
    <div
      style={{
        position: "relative",
        height: 360,
        borderRadius: "var(--radius-lg)",
        overflow: "hidden",
        background: "var(--canvas)",
        transform: "translateZ(0)",
      }}
    >
      <ConfirmDialog
        open
        danger
        title="Delete halo.dev?"
        text="DNS records, mailboxes and certificates for this domain are removed. This can’t be undone."
        confirmText="halo.dev"
        confirmLabel="Delete domain"
        onCancel={() => {}}
        onConfirm={() => {}}
      />
    </div>
  );
}
export default App;
```

## Props

### ConfirmDialog

| Prop | Type | Notes |
| --- | --- | --- |
| `open` | `boolean` | Required |
| `title` | `string` | Required |
| `text?` | `string` |  |
| `danger?` | `boolean` |  |
| `icon?` | `IconName` |  |
| `confirmLabel?` | `string` |  |
| `cancelLabel?` | `string` |  |
| `confirmText?` | `string` |  |
| `onConfirm` | `() => void` | Required |
| `onCancel` | `() => void` | Required |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |