Badge / Types

Example of Types in Blazor CSS Badge Component

Loading Syncfusion Blazor Server Demos…

.e-badge-primary
.e-badge-secondary
.e-badge-success
.e-badge-danger
.e-badge-warning
.e-badge-info
.e-badge-light
.e-badge-dark

This sample demonstrates eight predefined badge colors for various notification scenarios.

The Badge component supports eight essential colors. All color classes should be added with the .e-badge class:

  • Primary - Apply .e-badge-primary class
  • Secondary - Apply .e-badge-secondary class
  • Success - Apply .e-badge-success class
  • Danger - Apply .e-badge-danger class
  • Warning - Apply .e-badge-warning class
  • Info - Apply .e-badge-info class
  • Light - Apply .e-badge-light class
  • Dark - Apply .e-badge-dark class
Transform your Blazor web apps today with Syncfusion® Blazor components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE