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" />
<IgbBadge />
To display a subtle border around the badge, you can set the outlined
attribute of the badge.
<IgbBadge Outlined="true" />
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="@BadgeVariant.Success" />
Shape
The badge component supports rounded
(default) and square
shapes. These values can be assigned to the shape
attribute.
<IgbBadge Shape="@BadgeShape.Square" />
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: var(--ig-primary-500);
color: var(--ig-primary-500-contrast);
border-radius: 2px;
}