Loading Syncfusion Blazor Server Demos…

Example of Types in Blazor CSS Badge Component

Badge / Types

This sample demonstrates 8-predefined badge colors for various scenarios which can be applied from the modifier class.

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

The badge supports the following 8 different essential colors for various situations. All the classes should be added with .e-badge class.

Primary: The .e-badge-primary class applies the primary color.
Secondary: The .e-badge-secondary class applies the secondary color.
Success: The .e-badge-success class applies the success color.
Danger: The .e-badge-danger class applies the danger color.
Warning: The .e-badge-warning class applies the warning color.
Info: The .e-badge-info class applies the info color.
Light: The .e-badge-light class applies the light color.
Dark: The .e-badge-dark class applies the dark color.