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

This element is a numeric value descriptor i.e it displays the unread count of messages for 1-1/group chats.

## Properties

| Name       | Type                                          | Description                       |
| ---------- | --------------------------------------------- | --------------------------------- |
| count      | number                                        | The numeric value to be displayed |
| badgeStyle | [BadgeStyle](/web-elements/badge#badge-style) | Styling properties of the element |

## Badge Style

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

## Usage

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


    //create style object
    const badgeStyle:BadgeStyle = new BadgeStyle({
    	width:"36px",
    	height:"36px",
    	textFont:"400 13px Inter",
    	textColor:"black"
    })

    //use the element
    <cometchat-badge badgeStyle={badgeStyle} count={10}></cometchat-badge>
    ```
  </Tab>
</Tabs>