0
# Confirmation Modals
1

2
Specialized modals with confirm/cancel buttons for user confirmations and destructive actions.
3

4
## Capabilities
5

6
### Open Confirmation Modal
7

8
Creates and displays a modal with confirm and cancel buttons for user confirmation.
9

10
```typescript { .api }
11
/**
12
 * Opens a confirmation modal with confirm/cancel buttons
13
 * @param props - Confirmation modal configuration
14
 * @returns Modal ID for future reference
15
 */
16
function openConfirmModal(props: OpenConfirmModal): string;
17

18
interface OpenConfirmModal extends ModalSettings, ConfirmModalProps {}
19
```
20

21
**Usage Examples:**
22

23
```typescript
24
import { openConfirmModal } from "@mantine/modals";
25
import { Text } from "@mantine/core";
26

27
// Simple confirmation
28
openConfirmModal({
29
  title: "Confirm action",
30
  children: <Text>Are you sure you want to proceed?</Text>,
31
  labels: { confirm: "Yes", cancel: "No" },
32
  onConfirm: () => console.log("Confirmed"),
33
  onCancel: () => console.log("Cancelled"),
34
});
35

36
// Destructive action confirmation
37
openConfirmModal({
38
  title: "Delete item",
39
  children: (
40
    <Text>
41
      This action cannot be undone. Are you sure you want to delete this item?
42
    </Text>
43
  ),
44
  labels: { confirm: "Delete", cancel: "Cancel" },
45
  confirmProps: { color: "red" },
46
  onConfirm: () => {
47
    // Perform deletion
48
    deleteItem();
49
  },
50
  onCancel: () => console.log("Deletion cancelled"),
51
});
52

53
// Custom styling and behavior
54
openConfirmModal({
55
  title: "Save changes",
56
  children: <Text>You have unsaved changes. Do you want to save them?</Text>,
57
  labels: { confirm: "Save", cancel: "Discard" },
58
  confirmProps: { 
59
    color: "blue",
60
    variant: "filled" 
61
  },
62
  cancelProps: { 
63
    variant: "default" 
64
  },
65
  closeOnConfirm: false, // Don't auto-close on confirm
66
  closeOnCancel: true,
67
  centered: true,
68
  onConfirm: async () => {
69
    await saveChanges();
70
    // Manually close after async operation
71
    closeModal(modalId);
72
  },
73
});
74
```
75

76
### Confirmation Modal Props
77

78
Complete configuration options for confirmation modals.
79

80
> **Note**: `ButtonProps` and `GroupProps` are from `@mantine/core` - see [Mantine documentation](https://mantine.dev/core/button/) for complete prop definitions.
81

82
```typescript { .api }
83
/**
84
 * Props for confirmation modal component
85
 */
86
interface ConfirmModalProps {
87
  /** Modal instance ID */
88
  id?: string;
89
  /** Modal content above buttons */
90
  children?: React.ReactNode;
91
  /** Callback when cancel button is clicked */
92
  onCancel?: () => void;
93
  /** Callback when confirm button is clicked */
94
  onConfirm?: () => void;
95
  /** Whether to close modal when confirm is clicked (default: true) */
96
  closeOnConfirm?: boolean;
97
  /** Whether to close modal when cancel is clicked (default: true) */
98
  closeOnCancel?: boolean;
99
  /** Props for cancel button */
100
  cancelProps?: ButtonProps & 
101
    React.ComponentPropsWithoutRef<'button'> & 
102
    Record<`data-${string}`, any>;
103
  /** Props for confirm button */
104
  confirmProps?: ButtonProps & 
105
    React.ComponentPropsWithoutRef<'button'> & 
106
    Record<`data-${string}`, any>;
107
  /** Props for button group container */
108
  groupProps?: GroupProps;
109
  /** Custom labels for buttons */
110
  labels?: ConfirmLabels;
111
}
112

113
/**
114
 * Button labels for confirmation modal
115
 */
116
interface ConfirmLabels {
117
  /** Confirm button text or element */
118
  confirm: React.ReactNode;
119
  /** Cancel button text or element */
120
  cancel: React.ReactNode;
121
}
122
```
123

124
### Button Customization
125

126
Customize the appearance and behavior of confirm and cancel buttons.
127

128
**Usage Examples:**
129

130
```typescript
131
import { openConfirmModal } from "@mantine/modals";
132

133
// Custom button styling
134
openConfirmModal({
135
  title: "Custom Buttons",
136
  children: <Text>Example with custom button styling</Text>,
137
  labels: { confirm: "Proceed", cancel: "Go Back" },
138
  confirmProps: {
139
    color: "green",
140
    variant: "filled",
141
    size: "md",
142
    leftSection: "✓",
143
  },
144
  cancelProps: {
145
    color: "gray",
146
    variant: "outline",
147
    size: "md",
148
    leftSection: "✗",
149
  },
150
  groupProps: {
151
    justify: "center",
152
    gap: "md",
153
  },
154
});
155

156
// HTML elements as labels
157
openConfirmModal({
158
  title: "Rich Labels",
159
  children: <Text>Buttons can have rich content</Text>,
160
  labels: {
161
    confirm: (
162
      <span>
163
        <strong>Delete</strong>
164
        <small style={{ display: "block" }}>This cannot be undone</small>
165
      </span>
166
    ),
167
    cancel: "Keep Item",
168
  },
169
  confirmProps: { color: "red" },
170
});
171
```
172

173
### Advanced Confirmation Patterns
174

175
Complex confirmation workflows and patterns.
176

177
**Usage Examples:**
178

179
```typescript
180
import { openConfirmModal, closeModal, updateModal } from "@mantine/modals";
181

182
// Multi-step confirmation
183
function deleteWithWarning() {
184
  const firstModalId = openConfirmModal({
185
    title: "Delete confirmation",
186
    children: <Text>This will permanently delete the item.</Text>,
187
    labels: { confirm: "I understand", cancel: "Cancel" },
188
    closeOnConfirm: false,
189
    onConfirm: () => {
190
      // Close first modal
191
      closeModal(firstModalId);
192
      
193
      // Open second confirmation
194
      openConfirmModal({
195
        title: "Final confirmation",
196
        children: (
197
          <Text c="red" fw="bold">
198
            This action cannot be undone. Type "DELETE" to confirm.
199
          </Text>
200
        ),
201
        labels: { confirm: "DELETE", cancel: "Cancel" },
202
        confirmProps: { color: "red" },
203
        onConfirm: () => performDeletion(),
204
      });
205
    },
206
  });
207
}
208

209
// Dynamic modal updates
210
function saveWithProgress() {
211
  const modalId = openConfirmModal({
212
    title: "Save changes",
213
    children: <Text>Ready to save your changes?</Text>,
214
    labels: { confirm: "Save", cancel: "Cancel" },
215
    closeOnConfirm: false,
216
    onConfirm: async () => {
217
      // Update to show progress
218
      updateModal({
219
        modalId,
220
        title: "Saving...",
221
        children: <Text>Saving changes, please wait...</Text>,
222
      });
223
      
224
      try {
225
        await saveChanges();
226
        updateModal({
227
          modalId,
228
          title: "Success",
229
          children: <Text c="green">Changes saved successfully!</Text>,
230
        });
231
        
232
        // Close after delay
233
        setTimeout(() => closeModal(modalId), 2000);
234
      } catch (error) {
235
        updateModal({
236
          modalId,
237
          title: "Error",
238
          children: <Text c="red">Failed to save changes.</Text>,
239
        });
240
      }
241
    },
242
  });
243
}
244

245
// Conditional confirmation
246
function smartDelete(hasUnsavedChanges: boolean) {
247
  if (hasUnsavedChanges) {
248
    openConfirmModal({
249
      title: "Unsaved changes",
250
      children: <Text>You have unsaved changes. Save before deleting?</Text>,
251
      labels: { confirm: "Save & Delete", cancel: "Cancel" },
252
      onConfirm: async () => {
253
        await saveChanges();
254
        performDeletion();
255
      },
256
    });
257
  } else {
258
    openConfirmModal({
259
      title: "Delete item",
260
      children: <Text>Are you sure you want to delete this item?</Text>,
261
      labels: { confirm: "Delete", cancel: "Cancel" },
262
      confirmProps: { color: "red" },
263
      onConfirm: performDeletion,
264
    });
265
  }
266
}
267
```