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

# Badge

> Badge — CometChat documentation.

The `CometChatBadgeCount` component displays the unread count of messages for one-to-one private and group chats.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/81096e07-1644930377-b8bea91cca7bc213c3ea591c6abe6978.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=becbcf1df14b670d8a19e93253c65c5a" width="1312" height="1299" data-path="images/81096e07-1644930377-b8bea91cca7bc213c3ea591c6abe6978.png" />
</Frame>

***

## How to integrate CometChatBadge ?

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatBadge
        count={count}
        style={badgeStyle}
      />
    ```
  </Tab>
</Tabs>

## Properties

| Properties | Type                                                                             | Description                                   |
| ---------- | -------------------------------------------------------------------------------- | --------------------------------------------- |
| `count`    | number                                                                           | number to display                             |
| style      | [CometChatBadgeInterface](/ui-kit/react-native/v4/badge#cometchatbadgeinterface) | used to customise the appearance of this view |

## CometChatBadgeInterface

| Properties      | Type                 | Description                           |
| --------------- | -------------------- | ------------------------------------- |
| textColor       | string               | colour of the text shown in the badge |
| textFont        | FontStyleInterface   | font of the text shown in the badge   |
| height          | number \| string     | height of the badge                   |
| width           | number \| string     | width of the badge                    |
| backgroundColor | string               | colour of the badge                   |
| border          | BorderStyleInterface | border of the badge                   |
| borderRadius    | number               | radius of the badge                   |

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatBadge
        count={badgeCount}
         style={{
            height: 100,
            width: 100,
            textFont: { fontSize: 32 },
            backgroundColor: "red"
        }}
     />
    ```
  </Tab>
</Tabs>

***