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-react

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

    import { IgrBadgeModule, IgrBadge } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrBadgeModule.register();

    <IgrBadge />

    Para exibir uma borda sutil ao redor do emblema, você pode definir o atributo outlined do emblema.

    <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

    O componente badge suporta formas rounded (padrão) e square. Esses valores podem ser atribuídos ao atributo shape.

    <IgrBadge shape="square" ></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: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  border-radius: 2px;
}

    API References

    Additional Resources