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:

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

    npm install igniteui-webcomponents

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

defineComponents(IgcBadgeComponent);

    <igc-badge></igc-badge>

    To display a subtle border around the badge, you can set the outlined attribute of the badge.

    <igc-badge outlined></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>

    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>

    Styling

    The badge component exposes a base part that can be used to change all of its style properties.

    igc-badge::part(base) {
  color: olive;
  background: beige;
  border-radius: 2px;
}

    API References

    Additional Resources