> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.