Descripción general del botón React Icon

    El componente Botón de icono de Ignite UI for React permite a los desarrolladores utilizar iconos registrados como botones en su aplicación. Lleva todas las características del componente de icono, pero también agrega características del componente de botón.

    React Icon Button Example

    Uso

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

    npm install igniteui-react

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

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

    <IgrIconButton name="thumb-up" collection="material"></IgrIconButton>

    Ejemplos

    Variante

    Al igual que los componentes de botón normales, el botón de icono admite varias variantes: flat (predeterminado), contained y outlined; Para cambiar el tipo de botón de icono, establezca el atributo de variant del botón de icono.

    <IgrIconButton name="search" variant="contained"></IgrIconButton>

    Tamaño

    El tamaño del botón se puede cambiar utilizando la variable CSS--ig-size a cualquiera de los tres tamaños admitidos:--ig-size-small,--ig-size-medium,--ig-size-large ( por defecto).

    <IgrIconButton className="size-medium" name="thumb-up"></IgrIconButton>

    .size-medium {
    --ig-size: var(--ig-size-medium);
}

    Tipo

    El componente del botón de icono cambiará su estructura interna de <button> a un elemento de tipo <a> cuando se establezca el atributo href. En ese caso, el botón del icono puede considerarse como un enlace normal. Configurar el atributo href le permitirá configurar también los atributos rel, target y download del botón de icono.

    <IgrIconButton name="thumb-up" collection="material" href="https://duckduckgo.com" target="_blank">
</IgrIconButton>

    reflejado

    Algunos íconos deben verse un poco diferentes cuando se usan en el modo De derecha a izquierda (RTL). Por ese motivo, proporcionamos un atributo mirrored que, cuando se configura, voltea el botón del ícono horizontalmente.

    <IgrIconButton name="thumb-up" mirrored={true}></IgrIconButton>

    Estilismo

    El IgrIconButton componente expone dos partes CSS -base y icon que le permiten diseñar el elemento de envoltura (<button> o <a>) y el elemento envuelto <igc-icon>.

    igc-icon-button[variant="contained"]:not([disabled])::part(base) {
  padding: 12px;
  background-color: var(--ig-success-500);
}

igc-icon-button::part(icon) {
  --size: 22px;
  color: var(--ig-success-500-contrast);
}

    Referencias de API

    Recursos adicionales