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

# Badge

> Badge — CometChat documentation.

`CometChatBadge` is the custom component which is used to display the unread message count. It can be used in widgets like `CometChatListItem` shown for Conversation objects, `CometChatUI`, etc.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/d5xW_uJ3Iif7doR1/images/b2f19f5c-1644915433-de5bd427ceef1fa8645991f3d8efbea2.gif?s=d3b25f1cdf46c9ec6db9736b2071f5f7" width="720" height="1560" data-path="images/b2f19f5c-1644915433-de5bd427ceef1fa8645991f3d8efbea2.gif" />
</Frame>

***

## How to integrate CometChatBadge?

Since `CometChatBadge` is a Widget, it can be added directly in the build method. `CometChatBadge` includes various attributes and methods to customize its UI.

### Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatBadge(
        count: 7,
    );
    ```
  </Tab>
</Tabs>

***

## Properties

| Parameters | Type | Description |
| - | - | - |
| int **count** | int | used to set value of count. |

***

## BadgeStyle

| Parameters | Type | Description |
| - | - | - |
| **textStyle** | TextStyle | used to set style for the count |
| **borderRadius** | double | used to modify the border radius |
| **background** | Color | used to set background color |
| **border** | BoxBorder | used to set border |
| **gradient** | Gradient | used to set a gradient background |
| **height** | double | used to set height |
| **width** | double | used to set width |

***

## Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatBadge(
        count: 7,
        style: BadgeStyle(
        width:  16,
        height:  16,
        background: Colors.blue,
        borderRadius: 24,
        border: Border.all(
            color: Colors.amber,
            width: 1,
        ),
        nameTextStyle: TextStyle(
            fontSize: 12, 
            color: Colors.yellow)
        )
    );
    ```
  </Tab>
</Tabs>


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