Visão geral do botão do ícone React

    O componente Botão de ícone Ignite UI for React permite que os desenvolvedores usem ícones registrados como botões em seu aplicativo. Ele carrega todos os recursos do componente de ícone, mas também adiciona recursos do componente de botão.

    React Icon Button Example

    Usage

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Você precisará importar o IgrIconButton CSS necessário e registrar seu módulo, assim:

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

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

    Examples

    Variant

    Semelhante aos componentes de botão regulares, o botão de ícone suporta diversas variantes: flat (padrão), contained e outlined; Para alterar o tipo de botão de ícone, defina o atributo variant do botão de ícone.

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

    Tamanho

    O tamanho do botão pode ser alterado utilizando a variável CSS--ig-size para qualquer um dos três tamanhos suportados:--ig-size-small,--ig-size-medium,--ig-size-large (padrão).

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

    igc-icon-button {
    --ig-size: var(--ig-size-medium);
}

    Type

    O componente do botão de ícone mudará sua estrutura interna de <button> para um elemento do tipo <a> quando o atributo href for definido. Nesse caso, o botão de ícone pode ser pensado como um link regular. Definir o atributo href permitirá que você também defina os atributos rel, target e download do botão de ícone.

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

    Mirrored

    Alguns ícones precisam parecer um pouco diferentes quando usados no modo Right-to-Left (RTL). Por esse motivo, fornecemos um atributo mirrored que, quando definido, inverte o botão do ícone horizontalmente.

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

    Styling

    O IgrIconButton componente expõe duas partes CSS -base e icon que permitem estilizar o elemento de encapsulamento (<button> ou <a>) e o elemento encapsulado <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);
}

    API References

    Additional Resources