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

# 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-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b6e1aa44-card_bubble-7c92cb22416af322529847710afa0e8e.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=e8e1fc3c4f969364dfb67297d836a29f" 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">
    ```typescript theme={null}
    <cometchat-card-bubble
    	message={message}	//message: CardMessage
    	cardBubbleStyle={style}	//style?: CardBubbleStyle
    />
    ```
  </Tab>
</Tabs>