Confirm Dialog

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	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
boxShadow	Sets shadow effects around the element
titleFont	Sets all the different properties of font for the heading text. Reference link
titleColor	Sets the foreground color of heading text.
messageTextFont	Sets all the different properties of font for the description text. Reference link
messageTextColor	Sets the foreground color of description text.
confirmButtonTextFont	Sets all the different properties of font for the confirm button text. Reference link
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
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
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
cancelButtonIconTint	Sets the tint or color applied to the icon displayed on the cancel button

Usage

JavaScript

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>