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 components such as Avatar, ListView, and Menu.

Trusted by the world’s leading companies

Overview

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 ListView, Avatar, and other container components.

Notification badge

The Blazor Badge can display unread notification counts in different colors to indicate their priority level.

Pill badge

Create badges with rounded edges by using the pill badge variant.

Link badge

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

Overlap badge

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

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.

Predefined styles

Eight predefined contextual color variants are available for badges.

Types of badges

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

UI customization

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

Integration with other components

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

Other supported frameworks

The Badge component is also available in Angular, React, Vue, and JavaScript frameworks. Check out the Badge in different platforms at the following links:

Our comprehensive competitor comparison of Blazor components will guide you to the perfect choice.

145+ UI components

1200+ interactive Blazor demos

3.2M+ downloads

Explore Complete Blazor Comparison

Not sure how to create your first Blazor Badge? Our video tutorial and documentation can help.

I’d love to watch it now I’d love to read it now

ALL COMPONENTS

SMART COMPONENTS

GRIDS

DATA VISUALIZATION

CALENDARS

FILE VIEWERS & EDITORS

DROPDOWNS

NAVIGATION

INPUTS

LAYOUT

BUTTONS

INTERACTIVE CHAT

FORMS

NOTIFICATION

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.

Blazor components

The speed how they adding new Blazor controls and update theirs functionality. I am using Blazor components. Searching for Blazor components I found that Syncfusion very fast adopted theirs controls for new development platform. Tech support is fast and excellent. The best of best is that they provide free controls for small business.