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 IgcBadgeComponent
, 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 IgcBadgeComponent
is as follows:
<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 IgcBadgeComponent
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;
}