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

## Properties

| Methods         | Parameters                                                 | Description                                                                                                              |
| --------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| message         | [CardMessage](/ui-kit/flutter/v4/interactive-card-message) | 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.                              |
| loggedInUser    | User                                                       | An instance of logged in user                                                                                            |
| onActionTap     | Function(BaseInteractiveElement interactiveElement)        | call back to perform custom action on tap of any button element                                                          |
| theme           | CometChatTheme                                             |                                                                                                                          |

***

## CardBubbleStyle

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

| Properties   | type               | Description                                                   |
| ------------ | ------------------ | ------------------------------------------------------------- |
| gradient     | Gradient           | Used to set Background of wrapper in card bubble              |
| borderRadius | double             | Used to set borderRadius of wrapper in card bubble            |
| border       | BoxBorder          | Used to set the border of the card bubble.                    |
| background   | Color              | Used to set the background color of the card.                 |
| height       | double             | Used to set the height of card bubble.                        |
| width        | double             | Used to cset the width of the card bubble.                    |
| buttonStyle  | ButtonElementStyle | Used to customize the styling of buttons in the card.         |
| textStyle    | TextStyle          | Used to customize the text style for the content in the card. |

***

## Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCardBubble(
        cardMessage: cardMessage,
    )
    ```
  </Tab>
</Tabs>