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

# File Bubble

> File Bubble — CometChat documentation.

This element handles the display and the download functionality for an individual file.

## Properties

| Name            | Type                                                         | Description                       |
| --------------- | ------------------------------------------------------------ | --------------------------------- |
| title           | string                                                       | Title of the element              |
| subtitle        | string                                                       | Subtitle of the element           |
| fileUrl         | string                                                       | URL of the file                   |
| downloadIconURL | string                                                       | Asset URL for the download icon   |
| fileStyle       | [FileBubbleStyle](/web-elements/file-bubble#filebubblestyle) | Styling properties of the element |

## FileBubbleStyle

Styling properties 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) |
| 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 the 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 the title text.                                                                                                                                         |
| iconTint      | Sets the tint or color applied to the download icon                                                                                                                                  |

## Usage

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

    const url = "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf";

    //use the element
    <cometchat-file-bubble fileURL={url}></cometchat-file-bubble>
    ```
  </Tab>
</Tabs>