> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.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-agent-native-development/-wBEWpNl3B5_KrQl/images/a44e097a-1uiubx53jq7dkmcqnbq3na6n6721934evr0yyg03jdmlnwys4khdv2d0w36y7tmt-d83e7d61ec4875a1c3787b29ce757069.png?fit=max&auto=format&n=-wBEWpNl3B5_KrQl&q=85&s=cba2cf578a04ecf5dfad41d0ec061848" width="793" height="1680" data-path="images/a44e097a-1uiubx53jq7dkmcqnbq3na6n6721934evr0yyg03jdmlnwys4khdv2d0w36y7tmt-d83e7d61ec4875a1c3787b29ce757069.png" />
</Frame>

***

## Properities

| Methods | Parameters | Description |
| - | - | - |
| message | Card Message | An instance of the `CardMessage` class which holds information about the card, such as image URL, text, and action buttons. |
| style? | CardBubbleStyleInterface | An instance of the `CardBubbleStyle` class for customizing the appearance of the card bubble. |
| onSubmitClick? | (formData: any) => void | A function that will be called when the action button of the card is clicked. This function receives the payload of the clicked action as an argument. |

## CardBubbleStyle

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

| Methods | Type | Description |
| - | - | - |
| backgroundColor | string | Used to set the background color of the card bubble. |
| borderRadius | number | Used to set the border radius of the card bubble. |
| textFont | FontStyle | Used to set the font style of the title. The object should include fontFamily, fontSize, and fontWeight. |
| textColor | string | Used to set the color of the title. |
| padding | number | Used to set the padding of the card bubble. |
| buttonStyle | ButtonStyleInterface | Used to customize the style of buttons. |
| imageStyle | ImageBubbleStyleInterface | Used to customize the style of the image in the card. |
| imageResizeMode | "cover" \| "contain" \| "stretch" \| "repeat" \| "center" | Used to set how to resize the image in the card. |

## Usage

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatCardBubble
      message={message} //message: CardMessage
      onSubmitClick={onSubmitClick} //onSubmitClick?: (data: any) => void
      style={style} //style?: CardBubbleStyle
    />
    ```
  </Tab>
</Tabs>


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