---
title: Confirmation dialog
description: ConfirmationDialog in Click UI is a modal dialog that prompts users to confirm or cancel an action.
category: Overlays
related: [Dialog, Button, Alert]
commonPatterns: [delete-confirmation, action-confirmation, warning-dialog]
---

Source: https://clickhouse.design/click-ui/confirmationdialog

# Confirmation dialog

ConfirmationDialog is a modal dialog that prompts users to confirm or cancel an action. It's perfect for destructive actions, important decisions, and ensuring users don't accidentally perform irreversible operations.

## Example

## Props

| Prop                 | Type                                              | Default value | Description                                                          |
| -------------------- | ------------------------------------------------- | ------------- | -------------------------------------------------------------------- |
| children             | `ReactNode`                                       | `undefined`   | Additional content to display in the dialog body                     |
| disabled             | `boolean`                                         | `false`       | Whether the confirmation buttons are disabled                        |
| loading              | `boolean`                                         | `false`       | Whether the dialog is in a loading state, showing a spinner          |
| message              | `string`                                          | `""`          | Main message text displayed in the dialog body                       |
| onCancel             | `() => void`                                      | `undefined`   | Callback function called when the cancel/secondary button is clicked |
| onConfirm            | `() => void`                                      | `undefined`   | Callback function called when the confirm/primary button is clicked  |
| open                 | `boolean`                                         | `false`       | Whether the confirmation dialog is open/visible                      |
| primaryActionLabel   | `string`                                          | `"Confirm"`   | Text label for the primary/confirm action button                     |
| primaryActionType    | `"primary" \| "secondary" \| "empty" \| "danger"` | `"primary"`   | Visual style variant of the primary action button                    |
| secondaryActionLabel | `string`                                          | `"Cancel"`    | Text label for the secondary/cancel action button                    |
| showClose            | `boolean`                                         | `false`       | Whether to show the close button (X) in the dialog header            |
| title                | `string`                                          | `""`          | Title text displayed in the dialog header                            |

```tsx
import { ConfirmationDialog } from '@clickhouse/click-ui'
import { useState } from 'react'

function MyConfirmationDialog() {
const [open, setOpen] = useState(false)
return (
  <>
    <Button onClick={() => setOpen(true)}>Delete</Button>
    <ConfirmationDialog
      open={open}
      title="Delete item"
      message="Are you sure you want to delete this item?"
      primaryActionLabel="Delete"
      secondaryActionLabel="Cancel"
      onConfirm={() => {
        console.log('Deleted')
        setOpen(false)
      }}
      onCancel={() => setOpen(false)}
    />
  </>
)
}
```

## Quick start

```tsx
import { ConfirmationDialog, Button } from '@clickhouse/click-ui'
import { useState } from 'react'

function MyConfirmationDialog() {
const [open, setOpen] = useState(false)
return (
  <>
    <Button onClick={() => setOpen(true)} label="Delete" />
    <ConfirmationDialog
      open={open}
      title="Delete item"
      message="Are you sure you want to delete this item? This action cannot be undone."
      primaryActionLabel="Delete"
      primaryActionType="danger"
      secondaryActionLabel="Cancel"
      onConfirm={() => {
        // Handle deletion
        setOpen(false)
      }}
      onCancel={() => setOpen(false)}
    />
  </>
)
}
```

## Related components

- **Dialog**: For general modal dialogs with custom content.
- **Button**: Commonly used to trigger confirmation dialogs.
- **Alert**: For non-blocking notifications instead of dialogs.

## Common use cases

### Delete confirmation

```tsx
import { ConfirmationDialog, Button } from '@clickhouse/click-ui'
import { useState } from 'react'

function DeleteConfirmation() {
const [open, setOpen] = useState(false)
return (
  <>
    <Button onClick={() => setOpen(true)} label="Delete" type="danger" />
    <ConfirmationDialog
      open={open}
      title="Delete item"
      message="Are you sure? This cannot be undone."
      primaryActionLabel="Delete"
      primaryActionType="danger"
      onConfirm={() => setOpen(false)}
      onCancel={() => setOpen(false)}
    />
  </>
)
}
```

### Action confirmation

```tsx
import { ConfirmationDialog, Button } from '@clickhouse/click-ui'
import { useState } from 'react'

function ActionConfirmation() {
const [open, setOpen] = useState(false)
return (
  <>
    <Button onClick={() => setOpen(true)} label="Publish" />
    <ConfirmationDialog
      open={open}
      title="Publish changes"
      message="Are you ready to publish your changes?"
      primaryActionLabel="Publish"
      onConfirm={() => setOpen(false)}
      onCancel={() => setOpen(false)}
    />
  </>
)
}
```

### With loading state

```tsx
import { ConfirmationDialog, Button } from '@clickhouse/click-ui'
import { useState } from 'react'

function LoadingConfirmation() {
const [open, setOpen] = useState(false)
const [loading, setLoading] = useState(false)
return (
  <>
    <Button onClick={() => setOpen(true)} label="Process" />
    <ConfirmationDialog
      open={open}
      title="Processing..."
      message="Please wait while we process your request"
      loading={loading}
      onConfirm={async () => {
        setLoading(true)
        await processRequest()
        setLoading(false)
        setOpen(false)
      }}
      onCancel={() => setOpen(false)}
    />
  </>
)
}
```