Blazor Badge Overview
The Ignite UI for Blazor Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed with predefined styles to communicate information, success, warnings, or errors.
Blazor Badge Example
Usage
Before using the IgbBadge, you need to register it as follows:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule));You will also need to link an additional CSS file to apply the styling to the IgbBadge component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />The simplest way to start using the IgbBadge is as follows:
<IgbBadge />Examples
Variants
The Ignite UI for Blazor badge supports several pre-defined stylistic variants. You can change the variant by assigning one of the supported values - primary(default), info, success, warning, or danger to the Variant attribute.
<IgbBadge Variant="@StyleVariant.Success" />Even if a custom background color is set for the badge using the --background-color CSS variable, the variant color always takes precedence and is applied to the badge.
Shape
The badge component supports rounded(default) and square shapes. These values can be assigned to the Shape attribute.
<IgbBadge Shape="@BadgeShape.Square" />When the badge has a square shape, it can be further customized by setting a custom border radius using the --border-radius CSS variable.
Outlined
The badge can also have a subtle border around it when the outlined attribute is set.
<IgbBadge Outlined="true" />The border color of the outlined badge can also be customized using the --border-color CSS variable.
Dot
The Ignite UI for Blazor badge component can also render as a minimal dot indicator for notifications by setting its dot attribute. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.).
<IgbBadge Dot="true" />Styling
The IgbBadge component exposes a base CSS part that can be used to change all of its style properties.
igc-badge::part(base) {
--background-color: var(--ig-error-A100);
--border-radius: 2px;
}