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

Quick start

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)}
    />
  </>
)
}

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

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

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

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)}
    />
  </>
)
}

Hover card Buttons