Descripción general de la insignia React

    La Ignite UI for React Badge es un componente que se utiliza junto con avatares, menús de navegación u otros componentes en 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, debe instalar el paquete Ignite UI for React npm correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Luego necesitarás importar IgrBadge, su CSS necesario y registrar su módulo, así:

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

    <IgrBadge />

    Para mostrar un borde sutil alrededor de la insignia, puede configurar el atributo outlined de la insignia.

    <IgrBadge outlined="true" ></IgrBadge>

    Examples

    Variants

    La insignia Ignite UI for React admite varias variantes estilísticas predefinidas. Puede cambiar la variante asignando uno de los valores admitidos: primary (predeterminado), info, success, warning o danger al atributo variant.

    <IgrBadge variant="success" ></IgrBadge>

    Shape

    El componente de insignia admite formas rounded (predeterminadas) y square. Estos valores se pueden asignar al atributo shape.

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

    Styling

    El componente de insignia expone una parte base que se puede usar para cambiar todas sus propiedades de estilo.

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

    API References

    Additional Resources