> ## 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/react/v4/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="JavaScript">
    ```javascript theme={null}
    import "@cometchat/uikit-elements"; //import the web elements package.
    import { BaseStyle } from "@cometchat/uikit-elements"; //import the BaseStyle class.


    const bStyle = new BaseStyle({
      background: "linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)"
    });
    <cometchat-backdrop :backdropStyle="bStyle"></cometchat-backdrop>
    ```
  </Tab>
</Tabs>