Skip to main content
Version: v4

Badge

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

Image

Properties

NameTypeDescription
countnumberThe numeric value to be displayed
badgeStyleBadgeStyleStyling properties of the element

Badge Style

NameDescription
textFontSets all the different properties of font for the badge text. Reference link
textColorSets the foreground color of the text displayed on the badge.

Usage

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>