​
Overview

This element renders its children component in front of the backdrop element.

​
Properties

NameTypeDescription
closeIconURLstringAsset URL for the close icon
closeOnBackdropClickbooleanWhen set to true, closes the modal when user clicks on the backdrop element
modalStyleModalStyleStyling properties and values of the element

​
ModalStyle

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. Reference link
boxShadowSets shadow effects around the element
closeIconTintSets the tint or color applied to the close icon
titleFontSets all the different properties of font for the heading text. Reference link
titleColorSets the foreground color of heading text.

​
Events

Events triggered by the element
NameDescription
cc-modal-close-clickedEvent triggered when user closes the modal element

​
Usage

import '@cometchat/uikit-elements';//import the web component package.
import { ModalStyle } from '@cometchat/uikit-elements';

const closeIconURL = "https://img.icons8.com/?size=24&id=52134&format=png";
const modalStyle = new ModalStyle({
	width: "500px",
  height: "500px",
  background: "white"
});

<cometchat-modal :closeIconURL="closeIconURL" :modalStyle="modalStyle"></cometchat-modal>