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

# Document Bubble

> Document Bubble — CometChat documentation.

This element is a card view consisting of title, subtitle, url, icon and a launch button.

Properties

| Name          | Type                                                         | Description                                                                      |
| ------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| URL           | string                                                       | URL of the element                                                               |
| title         | string                                                       | Title of the element                                                             |
| subtitle      | string                                                       | Subtitle of the element                                                          |
| buttonText    | string                                                       | Text on the launch button                                                        |
| iconURL       | string                                                       | Asset URL for the download icon                                                  |
| hideSeparator | boolean                                                      | When set to true, hides the separator which is displayed above the launch button |
| iconAlignment | [DocumentIconAlignment](/web-shared/documenticonalignment)   | used to override click callback                                                  |
| documentStyle | [documentStyle](/web-elements/document-bubble#documentstyle) | Styling properties and values of the element                                     |

## documentStyle

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)                      |
| iconTint         | Sets the tint or color applied to the download icon of the element                                                                                                                                        |
| separatorColor   | Sets the color of the separator between individual items                                                                                                                                                  |
| titleFont        | Sets all the different properties of font for the title text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                                                     |
| titleColor       | Sets the foreground color of title text.                                                                                                                                                                  |
| subtitleFont     | Sets all the different properties of font for the subtitle text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                                                  |
| subtitleColor    | Sets the foreground color of subtitle text.                                                                                                                                                               |
| buttonTextFont   | Sets all the different properties of font for the text on the launch button. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                                      |
| buttonTextColor  | Sets the foreground color of launch button text.                                                                                                                                                          |
| buttonBackground | Sets all background style properties at once, such as color, image, origin and size, or repeat method of the launch button. [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 component package.

    const URL = "https://document.cometchat.io/p/uniqdocid";
    const title = "Collaborative Document";

    //use the element
    <cometchat-document-bubble URL={url} title={title}></cometchat-document-bubble>
    ```
  </Tab>
</Tabs>