Skip to main content

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

NameTypeDescription
titlestringHeading text of the element
messageTextstringDescription text of the element
confirmButtonTextstringText on the confirm button
cancelButtonTextstringText on the cancel button
confirmButtonIconURLstringAsset URL for the icon that appears on the confirm button
cancelButtonIconURLstringAsset URL for the icon that appears on the cancel button
confirmDialogStyleConfirmDialogStyleStyling properties and values of the element

Events

Events triggered by the element

NameDescription
cc-confirm-clickedTriggered when user clicks on the confirm button
cc-cancel-clickedTriggered when user clicks on the cancel button

ConfirmDialogStyle

Styling properties and values of the element

NameDescription
widthSets the width of the element
heightSets the height of the element
borderSets the border of the element
borderRadiusSets the border radius of the element
backgroundSets all background style properties at once, such as color, image, origin and size, or repeat method of the element. Reference link
boxShadowSets shadow effects around the element
titleFontSets all the different properties of font for the heading text. Reference link
titleColorSets the foreground color of heading text.
messageTextFontSets all the different properties of font for the description text. Reference link
messageTextColorSets the foreground color of description text.
confirmButtonTextFontSets all the different properties of font for the confirm button text. Reference link
confirmButtonTextColorSets the foreground color of confirm button text.
confirmButtonBackgroundSets all background style properties at once, such as color, image, origin and size, or repeat method of the confirm button. Reference link
confirmButtonIconTintSets the tint or color applied to the icon displayed on the confirm button
cancelButtonTextFontSets all the different properties of font for the cancel button text. Reference link
cancelButtonTextColorSets the foreground color of cancel button text.
cancelButtonBackgroundSets all background style properties at once, such as color, image, origin and size, or repeat method of the cancel button. Reference link
cancelButtonIconTintSets the tint or color applied to the icon displayed on the cancel button

Usage

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>