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" />

    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;
}

    API References

    Additional Resources