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

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


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