An easily customizable, pure HTML5/CSS notification badge that provides widely used badge types, standard colors, and predefined color variants.
The Badge is commonly used to display a notification count or status information in different sizes and contextual color variants.
Easy integration with other controls such as Avatar, ListView, and Menu.

Trusted by the world’s leading companies

Overview

The JavaScript Badge is a pure CSS control used to add notifications, messages, or statuses in different shapes and sizes. The Badge control can be easily integrated with ListView, Avatar, and other container controls.

Notification badge

The CSS Badge displays unread notification counts in different colors to indicate their priority level.

Facebook notification badge documentation.

Pill badge

Create badges with rounded edges using the pill badge variant.

Pill badge documentation.

Link badge

Create clickable link badges using the link CSS badge variant with an anchor element. It has hover and focus states.

Link badge documentation.

Overlap badge

Create badges that overlap with profile icons or images, similar to social media notification count badges.

Overlap badge documentation.

Badge position

The notification badge can be positioned at the top or bottom of profile icons or images. It is placed at the top by default.

Badge position documentation.

Predefined styles

Eight predefined contextual color variants are available for badges.

Types of badges

The CSS Badge control supports six different styles: default, circle, pill, notification, ghost, and dot.

Types of badges documentation.

UI customization

Completely customize the CSS Badge attributes, like dimensions and colors.

Badge customization documentation.

Integration with other controls

Integrate the CSS Badge into various controls to achieve different UIs, such as displaying the number of unread messages in an email category or the status of product support.

Badge integration documentation.

Other supported frameworks

The Badge component is also available in our Angular, React, and Vue frameworks. Check out the Badge in different platforms from these links:

JavaScript Badge code example

Easily get started with the JavaScript Badge (HTML5 Badge) using a few simple lines of HTML and TS code, as demonstrated in the following. Also explore our JavaScript Badge example, which shows you how to render and configure the Badge in JavaScript.

html
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'>
            <h1>Badge Component <span class="e-badge e-badge-primary">New</span></h1>
        </div>
    </div>
</body>

Not sure how to create your first JavaScript Badge? Our documentation can help.

I’d love to read it now.

ALL CONTROLS

SMART COMPONENTS

GRIDS

DATA VISUALIZATION

CALENDARS

DROPDOWNS

FILE VIEWERS & EDITORS

BUTTONS

INTERACTIVE CHAT

INPUTS

NAVIGATION

LAYOUT

FORMS

Query Builder UI

NOTIFICATIONS

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion^® reduces customers’ development time.
Here are some of their experiences.

Light and fast

I like JS controls the most, they are simple to use and easy to integrate to JS apps. In ASP.NET MVC your controls behave very nice, although I consider I have more control by using the JS version

Alexis A,

Software Architect, Small-Business

Syncfusion - Great controls and terrific support

The best in Syncfusion is the attention and efforts spent by the technical support whenever needed. It's priceless. The Syncfusion controls are really usefull to accelerate my projects, mainly those things related to UI.