Confirm Dialog - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatConfirmDialog",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatConfirmDialog } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "A modal confirmation dialog with icon, title, message, and action buttons for destructive or important actions requiring explicit user confirmation.",
  "cssRootClass": ".cometchat-confirm-dialog",
  "primaryOutput": {
    "prop": "onConfirm",
    "type": "() => void | Promise<void>"
  },
  "props": {
    "data": {
      "title": { "type": "string", "default": "localized 'conversation_delete_title'" },
      "message": { "type": "string", "default": "localized 'conversation_delete_subtitle'" },
      "cancelText": { "type": "string", "default": "localized 'conversation_delete_confirm_no'" },
      "confirmText": { "type": "string", "default": "localized 'conversation_delete_confirm_yes'" },
      "errorText": { "type": "string", "default": "undefined" }
    },
    "callbacks": {
      "onClose": { "type": "() => void", "default": "undefined" },
      "onConfirm": { "type": "() => void | Promise<void>", "default": "undefined" },
      "onCancel": { "type": "() => void", "default": "calls onClose" }
    },
    "behavior": {
      "isOpen": { "type": "boolean", "default": "undefined (uncontrolled)" },
      "closeOnOutsideClick": { "type": "boolean", "default": "true" },
      "variant": { "type": "'danger' | 'warning' | 'info'", "default": "'danger'" },
      "isLoading": { "type": "boolean", "default": "auto-managed from Promise" }
    },
    "viewSlots": {
      "icon": { "type": "ReactNode", "default": "variant-based delete icon" },
      "children (Content)": { "type": "ReactNode", "default": "title + message" },
      "children (Actions)": { "type": "ReactNode", "default": "cancel + confirm buttons" }
    }
  },
  "events": [],
  "sdkListeners": [],
  "types": {
    "CometChatConfirmDialogVariant": "'danger' | 'warning' | 'info'"
  }
}

Where It Fits

CometChatConfirmDialog is a base modal component used whenever a destructive or important action needs explicit user confirmation. Wire it into feature components like CometChatConversations (delete conversation), CometChatGroupMembers (kick/ban member), or CometChatMessageList (image moderation) to gate critical actions behind a confirmation step.

import { useState } from "react";
import { CometChatConfirmDialog } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function App() {
  const [showConfirm, setShowConfirm] = useState(false);

  const handleDelete = async () => {
    await deleteConversation(conversationId);
  };

  return (
    <div>
      <button onClick={() => setShowConfirm(true)}>Delete Conversation</button>
      <CometChatConfirmDialog.Root
        isOpen={showConfirm}
        onClose={() => setShowConfirm(false)}
        variant="danger"
      >
        <CometChatConfirmDialog.Icon />
        <CometChatConfirmDialog.Content
          title="Delete Conversation?"
          message="This action cannot be undone."
        />
        <CometChatConfirmDialog.Actions
          cancelText="Cancel"
          confirmText="Delete"
          onConfirm={handleDelete}
        />
      </CometChatConfirmDialog.Root>
    </div>
  );
}

Minimal Render

import { CometChatConfirmDialog } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function Demo() {
  return (
    <CometChatConfirmDialog.Root isOpen={true} onClose={() => {}}>
      <CometChatConfirmDialog.Icon />
      <CometChatConfirmDialog.Content />
      <CometChatConfirmDialog.Actions />
    </CometChatConfirmDialog.Root>
  );
}

Root CSS class: .cometchat-confirm-dialog

Actions and Events

Callback Props

onConfirm

Called when the confirm button is clicked. If it returns a Promise, the button automatically shows a loading state and catches errors.

<CometChatConfirmDialog.Actions
  onConfirm={async () => {
    await api.deleteConversation(id);
  }}
/>

onCancel

Called when the cancel button is clicked. Falls back to onClose from context if not provided.

<CometChatConfirmDialog.Actions
  onCancel={() => {
    console.log("User cancelled");
    setOpen(false);
  }}
/>

onClose

Called when the dialog requests to close (Escape key, outside click, or cancel button).

<CometChatConfirmDialog.Root
  isOpen={open}
  onClose={() => setOpen(false)}
>
  {/* ... */}
</CometChatConfirmDialog.Root>

Custom View Slots

Slot	Signature	Replaces
`icon` (Icon)	`ReactNode`	Default variant-based icon
`children` (Content)	`ReactNode`	Title + message text
`children` (Actions)	`ReactNode`	Cancel + confirm buttons

Custom Icon

Replace the default delete icon with any React element.

TypeScript
CSS

<CometChatConfirmDialog.Icon
  icon={
    <svg width="36" height="36" viewBox="0 0 24 24" fill="none">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="#f5a623" />
    </svg>
  }
/>

/* The icon wrapper can be styled via the BEM class */
.cometchat-confirm-dialog__icon {
  background: #fff3e0;
}

Custom Content

Override the title/message with fully custom children.

TypeScript
CSS

<CometChatConfirmDialog.Content>
  <div style={{ textAlign: "center" }}>
    <h3>Are you absolutely sure?</h3>
    <p>This will permanently remove all messages.</p>
    <p><strong>This cannot be undone.</strong></p>
  </div>
</CometChatConfirmDialog.Content>

.cometchat-confirm-dialog__content {
  gap: 8px;
}

Custom Actions

Replace the default buttons with fully custom action elements.

TypeScript
CSS

<CometChatConfirmDialog.Actions>
  <button onClick={handleCancel}>Go Back</button>
  <button onClick={handleConfirm} style={{ background: "red", color: "white" }}>
    Yes, Delete Everything
  </button>
</CometChatConfirmDialog.Actions>

.cometchat-confirm-dialog__actions {
  justify-content: flex-end;
}

CSS Architecture

The component uses CSS custom properties (design tokens) defined in @cometchat/chat-uikit-react/css-variables.css. The cascade:

Global tokens set on the .cometchat root wrapper.
Component CSS (.cometchat-confirm-dialog) consumes these tokens via var().
Overrides target .cometchat-confirm-dialog descendant selectors.

Key Selectors

Target	Selector
Backdrop	`.cometchat-confirm-dialog__backdrop`
Dialog container	`.cometchat-confirm-dialog`
Icon wrapper	`.cometchat-confirm-dialog__icon`
Content area	`.cometchat-confirm-dialog__content`
Title	`.cometchat-confirm-dialog__content-title`
Message	`.cometchat-confirm-dialog__content-message`
Actions row	`.cometchat-confirm-dialog__actions`
Cancel button	`.cometchat-confirm-dialog__actions-cancel`
Confirm button	`.cometchat-confirm-dialog__actions-confirm`
Error banner	`.cometchat-confirm-dialog__error`

Example: Brand-themed dialog

.cometchat-confirm-dialog {
  border-radius: 24px;
  border-color: #e0e0e0;
}

.cometchat-confirm-dialog__icon {
  background: #fce4ec;
}

.cometchat-confirm-dialog__actions-confirm--danger button {
  background: #d32f2f;
}

Customization Matrix

What to change	Where	Property/API	Example
Override behavior	Component props	`onConfirm`, `onCancel`, `onClose`	`onConfirm={handleDelete}`
Control open state	Component props	`isOpen`, `onClose`	`isOpen={showDialog}`
Change variant	Component props	`variant`	`variant="warning"`
Disable outside click	Component props	`closeOnOutsideClick`	`closeOnOutsideClick={false}`
Replace icon	Sub-component prop	`icon` on `Icon`	`<Icon icon={<MyIcon />} />`
Replace content	Sub-component children	`children` on `Content`	`<Content><Custom /></Content>`
Replace buttons	Sub-component children	`children` on `Actions`	`<Actions><Custom /></Actions>`
Change visual styling	Global CSS	`.cometchat-confirm-dialog` selectors	See CSS Selectors table

Props

All props are optional unless noted otherwise.

cancelText

Text for the cancel button.


Type	`string`
Default	Localized `"Cancel"`

children (Root)

Sub-components to render inside the dialog. Required on Root.


Type	`ReactNode`
Default	`Icon + Content + Actions`

className

Optional custom CSS class name applied to the component root.


Type	`string`
Default	`undefined`

closeOnOutsideClick

Whether clicking outside the dialog closes it.


Type	`boolean`
Default	`true`

confirmText

Text for the confirm button.


Type	`string`
Default	Localized `"Confirm"`

errorText

Error message displayed above the action buttons. Auto-set when onConfirm rejects.


Type	`string`
Default	`undefined`

icon

Custom icon element for the Icon sub-component.


Type	`ReactNode`
Default	Variant-based delete icon

isLoading

Whether the confirm button shows a loading state. Auto-managed when onConfirm returns a Promise.


Type	`boolean`
Default	Auto-managed

isOpen

Whether the dialog is open. When provided, the component is controlled.


Type	`boolean`
Default	`undefined` (uncontrolled)

message

Descriptive message text in the Content sub-component.


Type	`string`
Default	Localized delete subtitle

onCancel

Callback when the cancel button is clicked. Falls back to onClose.


Type	`() => void`
Default	Calls `onClose`

onClose

Callback when the dialog requests to close.


Type	`() => void`
Default	`undefined`

onConfirm

Callback when the confirm button is clicked. Can return a Promise for async operations.


Type	`() => void \| Promise<void>`
Default	`undefined`

title

Title text in the Content sub-component.


Type	`string`
Default	Localized delete title

variant

Visual variant affecting icon and confirm button color.


Type	`'danger' \| 'warning' \| 'info'`
Default	`'danger'`

type CometChatConfirmDialogVariant = 'danger' | 'warning' | 'info';

CSS Selectors

Target	Selector
Backdrop overlay	`.cometchat-confirm-dialog__backdrop`
Dialog container	`.cometchat-confirm-dialog`
Icon wrapper	`.cometchat-confirm-dialog__icon`
Icon danger modifier	`.cometchat-confirm-dialog__icon--danger`
Icon warning modifier	`.cometchat-confirm-dialog__icon--warning`
Icon info modifier	`.cometchat-confirm-dialog__icon--info`
Default icon element	`.cometchat-confirm-dialog__icon-default`
Content area	`.cometchat-confirm-dialog__content`
Title text	`.cometchat-confirm-dialog__content-title`
Message text	`.cometchat-confirm-dialog__content-message`
Actions row	`.cometchat-confirm-dialog__actions`
Cancel button wrapper	`.cometchat-confirm-dialog__actions-cancel`
Confirm button wrapper	`.cometchat-confirm-dialog__actions-confirm`
Confirm danger modifier	`.cometchat-confirm-dialog__actions-confirm--danger`
Confirm warning modifier	`.cometchat-confirm-dialog__actions-confirm--warning`
Confirm info modifier	`.cometchat-confirm-dialog__actions-confirm--info`
Confirm loading modifier	`.cometchat-confirm-dialog__actions-confirm--loading`
Error banner	`.cometchat-confirm-dialog__error`

Documentation Index

​Where It Fits

​Minimal Render

​Actions and Events

​Callback Props

​onConfirm

​onCancel

​onClose

​Custom View Slots

​Custom Icon

​Custom Content

​Custom Actions

​CSS Architecture

​Key Selectors

​Example: Brand-themed dialog

​Customization Matrix

​Props

​cancelText

​children (Root)

​className

​closeOnOutsideClick

​confirmText

​errorText

​icon

​isLoading

​isOpen

​message

​onCancel

​onClose

​onConfirm

​title

​variant

​CSS Selectors

Where It Fits

Minimal Render

Actions and Events

Callback Props

onConfirm

onCancel

onClose

Custom View Slots

Custom Icon

Custom Content

Custom Actions

CSS Architecture

Key Selectors

Example: Brand-themed dialog

Customization Matrix

Props

cancelText

children (Root)

className

closeOnOutsideClick

confirmText

errorText

icon

isLoading

isOpen

message

onCancel

onClose

onConfirm

title

variant

CSS Selectors