Web Components Badge Overview

The Ignite UI for Web Components 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.

Web Components Badge Example

Usage

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents

You will then need to import the Badge, its necessary CSS, and register its module, like so:

import { defineComponents, IgcBadgeComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcBadgeComponent);

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

The simplest way to start using the Badge is as follows:

<igc-badge></igc-badge>

Examples

Variants

The Ignite UI for Web Components 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.

<igc-badge variant="success"></igc-badge>

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.

<igc-badge shape="square"></igc-badge>

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.

<igc-badge outlined></igc-badge>

The border color of the outlined badge can also be customized using the --border-color CSS variable.

Dot

The Ignite UI for Web Components 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.).

<igc-badge dot></igc-badge>

Styling

The Badge 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

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub