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

# Text Bubble

> Text Bubble — CometChat documentation.

`CometChatTextBubble` is the content view shown for [TextMessage](/sdk/flutter/send-message#text-message).

| Properties | Type | Description |
| - | - | - |
| **text** | String | the text to display |
| **style** | [TextBubbleStyle](/ui-kit/flutter/v4/text-bubble#textbubblestyle) | used to customize appearance of this widget |
| **theme** | [Theme](/ui-kit/flutter/v4/theme) | used to set custom theme |
| **alignment** | BubbleAlignment | alignment can be left, right or center |

***

## TextBubbleStyle

`TextBubbleStyle` is the class containing attributes to customize appearance of this widget.

| Properties | Type | Description |
| - | - | - |
| **textStyle** | TextStyle | used to set style of the text of the message |
| **height** | double | used to set height |
| **width** | double | used to set width |
| **background** | Color | used to set background color |
| **gradient** | Gradient | used to set a gradient background |
| **border** | BoxBorder | used to set border |
| **borderRadius** | double | used to set border radius |

***

## Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatTextBubble(
        text:'Hi! how are you?',
        alignment: BubbleAlignment.right,
        theme: cometChatTheme,
        style: TextBubbleStyle(background: Colors.teal),
    );
    ```
  </Tab>
</Tabs>


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