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 tendrás que importar elIgrIconButton 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

    Similar a los componentes de botones normales, el botón icono soporta varias variantes -flat(por defecto),contained youtlined; Para cambiar el tipo de botón de icono, establece elvariant atributo del botón icono.

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

    Tamaño

    El tamaño del botón puede cambiarse utilizando la--ig-size variable CSS a cualquiera de los tres tamaños soportados:--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 icono de botón cambiará su estructura interna de<button> a<a> un elemento tipo cuando se establece elhref atributo. En ese caso, el botón icono puede considerarse un enlace normal. Configurar elhref atributo te permitirá también establecer elrel,target, ydownload atributos del botón icono.

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

    reflejado

    Algunos iconos deben verse un poco diferentes cuando se usan en modo de derecha a izquierda (RTL). Por eso proporcionamos unmirrored atributo que, al activarse, gira el botón del icono horizontalmente.

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

    Estilismo

    ElIgrIconButton componente expone dos partes CSS —basequeicon te permiten estilizar el elemento de envolvimiento (<button>o<a>) y el elemento envolvido<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