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

    Uso

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

    npm install igniteui-react

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

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

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

    Exemplos

    Variante

    Semelhante aos componentes normais dos botões, o botão ícone suporta várias variantes -flat(padrão),contained eoutlined; Para mudar o tipo de botão de ícone, defina ovariant atributo do botão de ícone.

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

    Tamanho

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

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

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

    Tipo

    O componente ícone do botão mudará sua estrutura interna de<button> para um<a> elemento tipo quando ohref atributo for definido. Nesse caso, o botão de ícone pode ser visto como um link comum. Definir ohref atributo permitirá que você também defina orel,target edownload atributos do botão de ícone.

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

    Mirrored

    Alguns ícones precisam ter uma aparência um pouco diferente quando usados no modo Direita para Esquerda (RTL). Por isso, fornecemos ummirrored atributo que, quando definido, vira o botão do ícone horizontalmente.

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

    Estilização

    OIgrIconButton componente expõe duas partes CSS —baseeicon isso permite que você estilize o elemento de enrolamento (<button>ou<a>) e o elemento enrolado<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);
}

    Referências de API

    Recursos adicionais