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

# Card Bubble

> Card Bubble — CometChat documentation.

The `CometChatCardBubble` component is used to display a card within a chat bubble. The card includes an image, text, and action buttons. It helps to offer action-oriented chat experiences, like booking a flight, ordering food, scheduling a meeting, etc., directly in the chat.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/d5xW_uJ3Iif7doR1/images/b6e1aa44-card_bubble-7c92cb22416af322529847710afa0e8e.png?fit=max&auto=format&n=d5xW_uJ3Iif7doR1&q=85&s=57bfe52471d1541940d029785dbbfb0d" width="699" height="720" data-path="images/b6e1aa44-card_bubble-7c92cb22416af322529847710afa0e8e.png" />
</Frame>

## Properties

| Methods | Parameters | Description |
| - | - | - |
| **message** | CardMessage | An instance of the `CardMessage` class which holds information about the card such as image URL, text, and action buttons. |
| **cardBubbleStyle ?** | CardBubbleStyle | An instance of the `CardBubbleStyle` class for customizing the appearance of the card bubble. |

## CardBubbleStyle

`CardBubbleStyle` is a class extending `BaseStyle` containing attributes to customize the appearance of the card in the `CometChatCardBubble` component.

| Methods | Type | Description |
| - | - | - |
| **wrapperBackground** | string | Used to set Background of wrapper in card bubble |
| **wrapperBorderRadius** | string | Used to set borderRadius of wrapper in card bubble |
| **descriptionFont** | string | Used to set the font style of the description. |
| **descriptionFontColor** | string | Used to set the color of the description. |
| **wrapperPadding** | string | Used to set the wrapperPadding of the card bubble. |
| **buttonStyle** | any | Used to customize the style of buttons. |
| **imageHeight** | string | Used to customize the height of the image in the card. |
| **imageWidth** | string | Used to customize the width of the image in the card. |
| **imageRadius** | string | Used to customize the border radius of the image in the card. |
| **imageBackgroundColor** | string | Used to customize the background color of the image in the card. |
| **dividerTintColor** | string | Used to customize the tint of divider in card bubble |
| **disabledButtonColor** | string | Used to customize the color of button when disabled |

## Usage

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChat-card-bubble
      message={message} //message: CardMessage
      cardBubbleStyle={style} //style?: CardBubbleStyle
    />
    ```
  </Tab>
</Tabs>


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