React Badge Overview
The Ignite UI for React 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.
React Badge Example
Usage
First, you need to the install the corresponding Ignite UI for React npm package by running the following command:
npm install igniteui-reactYou will then need to import the IgrBadge and its necessary CSS like so:
import { IgrBadge } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';The simplest way to start using the IgrBadge is as follows:
<IgrBadge />To display a subtle border around the badge, you can set the Outlined attribute of the badge.
<IgrBadge outlined={true} ></IgrBadge>Examples
Variants
The Ignite UI for React 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.
<IgrBadge variant="success" ></IgrBadge>Shape
The badge component supports rounded(default) and square shapes. These values can be assigned to the Shape attribute.
<IgrBadge shape="square" ></IgrBadge>Dot
The Ignite UI for React 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.).
<IgrBadge dot={true} ></IgrBadge>Styling
The IgrBadge 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;
}