Badge - CometChat Docs

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

Properties

Name	Type	Description
count	number	The numeric value to be displayed
badgeStyle	BadgeStyle	Styling properties of the element

Badge Style

Name	Description
textFont	Sets all the different properties of font for the badge text. Reference link
textColor	Sets the foreground color of the text displayed on the badge.

Usage

JavaScript

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>

⌘I