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

# Confirm Dialog

> Confirm Dialog — CometChat documentation.

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](/web-elements/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="JavaScript">
    ```javascript theme={null}
    import '@cometchat/uikit-elements';//import the web component package.

    const title = "Confirm";
    const messageText	= "Are you sure, you want to confirm?"

    <cometchat-confirm-dialog 
    :title="title" 
    :messageText="messageText">
    </cometchat-confirm-dialog>
    ```
  </Tab>
</Tabs>