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

# File Bubble

> File Bubble — CometChat documentation.

`CometChatFileBubble` is the content view for a MediaMessage if the media sent is a 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](/ui-kit/angular/v4/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="HTML">
    ```html theme={null}
    <!--use the element-->
    <cometchat-file-bubble
    [fileURL]="url"
    ></cometchat-file-bubble>
    ```
  </Tab>

  <Tab title="JavaScript">
    ```js 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";
    ```
  </Tab>
</Tabs>


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