> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Confirm Dialog

> Confirm Dialog — CometChat documentation.

## OverView

This element is a type of modal window that appears in front of app content to ask for a decision. It require users to explicitly confirm their choice before an option is committed.

Clicking on "Cancel" cancels the action, discards any changes, and closes the dialog.

## Properties

| Name | Type | Description |
| - | - | - |
| title | string | Heading text of the element |
| messageText | string | Description text of the element |
| confirmButtonText | string | Text on the confirm button |
| cancelButtonText | string | Text on the cancel button |
| confirmButtonIconURL | string | Asset URL for the icon that appears on the confirm button |
| cancelButtonIconURL | string | Asset URL for the icon that appears on the cancel button |
| confirmDialogStyle | [ConfirmDialogStyle](/ui-kit/angular/v4/confirm-dialog#confirmdialogstyle) | Styling properties and values of the element |

## Events

Events triggered by the element

| Name | Description |
| - | - |
| cc-confirm-clicked | Triggered when user clicks on the confirm button |
| cc-cancel-clicked | Triggered when user clicks on the cancel button |

## ConfirmDialogStyle

Styling properties and values of the element

| Name | Description |
| - | - |
| width | Sets the width of the element |
| height | Sets the height of the element |
| border | Sets the border of the element |
| borderRadius | Sets the border radius of the element |
| background | Sets all background style properties at once, such as color, image, origin and size, or repeat method of the element. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| boxShadow | Sets shadow effects around the element |
| titleFont | Sets all the different properties of font for the heading text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font) |
| titleColor | Sets the foreground color of heading text. |
| messageTextFont | Sets all the different properties of font for the description text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font) |
| messageTextColor | Sets the foreground color of description text. |
| confirmButtonTextFont | Sets all the different properties of font for the confirm button text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font) |
| confirmButtonTextColor | Sets the foreground color of confirm button text. |
| confirmButtonBackground | Sets all background style properties at once, such as color, image, origin and size, or repeat method of the confirm button. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| confirmButtonIconTint | Sets the tint or color applied to the icon displayed on the confirm button |
| cancelButtonTextFont | Sets all the different properties of font for the cancel button text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font) |
| cancelButtonTextColor | Sets the foreground color of cancel button text. |
| cancelButtonBackground | Sets all background style properties at once, such as color, image, origin and size, or repeat method of the cancel button. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| cancelButtonIconTint | Sets the tint or color applied to the icon displayed on the cancel button |

## Usage

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <cometchat-confirm-dialog 
    [title]="'title'" 
    [messageText]="'messageText'">
    </cometchat-confirm-dialog>
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.