Descripción general de la insignia React

    La insignia Ignite UI for React es un componente que se utiliza junto con avatares, menús de navegación u otros componentes de una aplicación cuando se necesita una notificación visual. Las insignias suelen estar diseñadas con estilos predefinidos para comunicar información, éxito, advertencias o errores.

    React Badge Example

    Usage

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Entonces tendrás que importar elIgrBadge CSS necesario de la siguiente manera:

    import { IgrBadge } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrBadge />

    Para mostrar un borde sutil alrededor de la insignia, puedes establecer eloutlined atributo de la insignia.

    <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

    El componente de insigniarounded soporta (por defecto) ysquare formas. Estos valores pueden asignarse alshape atributo.

    <IgrBadge shape="square" ></IgrBadge>

    Styling

    ElIgrBadge componente expone unabase parte CSS que puede usarse para cambiar todas sus propiedades de estilo.

    igc-badge::part(base) {
  background: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  border-radius: 2px;
}

    API References

    Additional Resources