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 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 the number of unread notifications 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 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 ASP.NET Core Badge attributes, like dimensions and colors.

Badge customization documentation.

Integration with other controls

Integrate the ASP.NET Core 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 control is also available in our Angular, React, Vue, and JavaScript frameworks. Check out the Badge on different platforms from these links:

ALL CONTROLS

GRIDS

DATA VISUALIZATION

CALENDARS

FILE VIEWERS & EDITORS

DROPDOWNS

NAVIGATION

INPUTS

LAYOUT

BUTTONS

NOTIFICATION

INTERACTIVE CHAT

FORMS

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.

Great and flexible controls to build web applications

Controls meet specifications to develop web applications (ASP.NET MVC and Core in my case) and provide a lot of features to develop world-class software. There are options for other frameworks/platforms. Support is excellent which makes me feel very confident when facing trouble, they provide answers in 24 hours. Support team will make a big effort to solve your issues and they are ready for a phone call and to remotely connect to your PC.

Jorge M,

Founder and Software Architect, Small-Business

Great tool, saves alot of time, and great support

Syncfusion really makes it simple to implement features that would take a ton of time and effort to create. When you're building your site, the UI can take a ton of time away from building the core app. With Syncfusion's tools it reduces that effort significantly so you can get back to building the core elements.

Walter T,

Founder, Small-Business

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Explore Case Studies

Industry

Software development

75%Cost reduction

50%Faster development

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story