React Icon Button Overview

    The Ignite UI for React Icon Button component allows developers to use registered icons as buttons in their application. It carries all features of the icon component but adds features from the button component as well.

    React Icon Button Example

    Usage

    First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

    npm install igniteui-react

    You will then need to import the IgrIconButton, its necessary CSS, and register its module, like so:

    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

    The IgrIconButton component exposes two CSS parts - base and icon that allow you to style the wrapping element (<button> or <a>) and the wrapped <igc-icon> element.

    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