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

# Backdrop

> Backdrop — CometChat documentation.

This element represents the background against which other elements are presented.

## Properties

| Name          | Type                                                    | Description                                  |
| ------------- | ------------------------------------------------------- | -------------------------------------------- |
| isOpen        | Boolean                                                 | When set to true, makes the element visible  |
| backdropStyle | [BackdropStyle](/ui-kit/angular/backdrop#backdropstyle) | Styling properties and values of the element |

## Events

Events dispatched from the element

| Name                | Description                                     |
| ------------------- | ----------------------------------------------- |
| cc-backdrop-clicked | Event triggered when user clicks on the element |

## BackdropStyle

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) |

## Usage

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <cometchat-backdrop
    [backdropStyle]="backdropStyle"
    ></cometchat-backdrop>
    ```
  </Tab>

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


    backdropStyle: BackdropStyle = new BackdropStyle({
      background: '#cba3ff',
      border: '1px solid #6f00ff',
      borderRadius: '12px',
    });
    ```
  </Tab>
</Tabs>