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

# Text Bubble

> Text Bubble — CometChat documentation.

`CometChatTextBubble` is the content view shown for TextMessage.

## Properties

| Name      | Type                                                            | Description                                                                              |
| --------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| text      | string                                                          | Text to be displayed                                                                     |
| textStyle | [TextBubbleStyle](/ui-kit/react/v4/text-bubble#textbubblestyle) | Styling properties and values of the [Text bubble](/ui-kit/react/v4/text-bubble) element |

## TextBubbleStyle

| Name      | Description                                                                                                                     |
| --------- | ------------------------------------------------------------------------------------------------------------------------------- |
| textFont  | Sets all the different properties of font for the text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font) |
| textColor | Sets the foreground color of the text.                                                                                          |

## Usage

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import '@cometchat/uikit-elements'; //import the web elements package

    //use the element
    <cometchat-text-bubble text="Hey, there!!"></cometchat-text-bubble>
    ```
  </Tab>
</Tabs>

## Usage

<Tabs>
  <Tab title="XML">
    ```xml theme={null}
    <com.cometchat.chatuikit.shared.views.CometChatTextBubble.CometChatTextBubble
            android:id="@+id/text_bubble"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    CometChatTextBubble cometChatTextBubble=view.findViewById(R.id.text_bubble);
    cometChatTextBubble.setText("Keep calm and chat on!");
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val cometChatTextBubble: CometChatTextBubble = findViewById(R.id.text_bubble)
    cometChatTextBubble.setText("Keep calm and chat on!")
    ```
  </Tab>
</Tabs>