> ## 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.

# Modal

> Modal — CometChat documentation.

## Overview

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

## Properties

| Name                 | Type                                           | Description                                                                 |
| -------------------- | ---------------------------------------------- | --------------------------------------------------------------------------- |
| closeIconURL         | string                                         | Asset URL for the close icon                                                |
| closeOnBackdropClick | boolean                                        | When set to true, closes the modal when user clicks on the backdrop element |
| modalStyle           | [ModalStyle](/ui-kit/angular/modal#modalstyle) | Styling properties and values of the element                                |

## ModalStyle

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. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| boxShadow     | Sets shadow effects around the element                                                                                                                                               |
| closeIconTint | Sets the tint or color applied to the close icon                                                                                                                                     |
| 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.                                                                                                                                           |

## Events

Events triggered by the element

| Name                   | Description                                        |
| ---------------------- | -------------------------------------------------- |
| cc-modal-close-clicked | Event triggered when user closes the modal element |

## Usage

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <cometchat-modal
    [closeIconURL]="closeIconURL"
    [modalStyle]="modalStyle"
    ></cometchat-modal>
    ```
  </Tab>

  <Tab title="JavaScript">
    ```js theme={null}
    import '@cometchat/uikit-elements';//import the web component package.
    import { ModalStyle } from '@cometchat/uikit-elements';

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