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

# Badge

`CometChatBadge` is the custom component which is used to display the unread message count. It can be used in places like CometChatListItem, etc.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-flutter-sdk-mark-as-unread/5G9r48QRJnNH-kPC/images/512b7dc2-wlt51ffbhd9jzdg7z6lnte79sev416ugyokd5w9o8uszp42sdob3zxfmx2ar8eg6-c582be8a7785966b93aa6a6e0b220855.png?fit=max&auto=format&n=5G9r48QRJnNH-kPC&q=85&s=7498655bd6bc436890206fc847ff6458" width="1312" height="1299" data-path="images/512b7dc2-wlt51ffbhd9jzdg7z6lnte79sev416ugyokd5w9o8uszp42sdob3zxfmx2ar8eg6-c582be8a7785966b93aa6a6e0b220855.png" />
</Frame>

***

## Properties

| Name       | Type                                            | Description                       |
| ---------- | ----------------------------------------------- | --------------------------------- |
| count      | number                                          | The numeric value to be displayed |
| badgeStyle | [BadgeStyle](/ui-kit/angular/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="HTML">
    ```html theme={null}
    <!--use the element-->
    <cometchat-badge
    [badgeStyle]="badgeStyle"
    [count]="'10'"
    ></cometchat-badge>
    ```
  </Tab>

  <Tab title="JavaScript">
    ```js theme={null}
    import  { BadgeStyle } from '@cometchat/chat-uikit-angular'; //import the style class.

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