> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-in-group-react-v6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Bubble

> Message Bubble — CometChat documentation.

## Overview

`CometChatMessageBubble` is the reusable components which forms different types of message bubbles accordingly.

There are different section available in message bubble which can be altered by passing `CometChatMessageTemplate` in `CometChatMessages`

***

## Sections

Following are the sections in message bubble

1. Header View
2. Leading View
3. Content View
4. Bottom View
5. Thread View
6. footer view

***

#### Properties

| Properties      | Type                                                          | Description                                                                       |
| --------------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| **leadingView** | Widget?                                                       | used to set view in leadingView section                                           |
| **headerView**  | Widget?                                                       | used to set view in headerview section                                            |
| **replyView**   | Widget?                                                       | used to set view in replyview section                                             |
| **contentView** | Widget?                                                       | used to set content view , by default all different type of bubble are shown here |
| **threadView**  | Widget?                                                       | used to set view in threadview section , by default threaded section is shown     |
| **footerView**  | Widget?                                                       | used to set footer view for message bubble , by default message receipt is shown  |
| **alignment**   | BubbleAlignment?                                              | used to set bubble alignment , can be **left**, **right** and **center**          |
| **style**       | [MessageBubbleStyle](/ui-kit/flutter/v4/message-bubble#style) | used to set styling properties foe message bubble                                 |
| **bottomView**  | Widget?                                                       | used to set bottom view for message bubble , by default reactions are shown here  |

***

### Style

| Properties         | Type       | Description                      |
| ------------------ | ---------- | -------------------------------- |
| **height**         | double     | used to set height               |
| **width**          | double     | used to set width                |
| **background**     | Color      | used to set the background color |
| **gradient**       | Gradient   | used to set background gradient  |
| **border**         | BoxBorder  | used to set border               |
| **borderRadius**   | double     | used to set border radius        |
| **contentPadding** | EdgeInsets | used to provide                  |