The badge is a pure CSS component used to add notifications, messages, or statuses in different shapes and sizes. The badge component can be easily integrated with components like list view, avatar, and other container components.
Badges can be used to display unread notification counts in different colors to indicate their priority level.
Badges are available in eight predefined styles.
Badge supports six different styles: default, circle, pill, notification, ghost, and dot.
Badges are designed with easy customization in mind. We can completely customize the attributes, like dimensions and colors.
Badge can be integrated into various components to achieve different applications, such as displaying an unread mail count in an email category, the current status of product support, etc.