React Button Overview

The React Button Component lets you enable clickable elements that trigger actions in your React app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the React Button clicked callback, toggle the React button, disable the React button, and more.

React 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 IgrButton, its necessary CSS, and register its module, like so:

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

<IgrButton />

Prefix / Suffix

With prefix and suffix slots of the IgrButton component, we can add different content before and after the main content of the button.

<IgrButton type="button" variant="contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</IgrButton>

Type

The button component will change its internal structure from a <button> to an <a> type element when the href attribute is set. In that case the button can be thought of as a regular link. Setting the href attribute will allow you to also set the rel, target and download attributes. In the case when the button component uses an actual <button> element internally, we can specify its displayType by setting the property to any of the following values:

Submit- quando queremos enviar os dados do formulário
reset- quando queremos redefinir os dados do formulário para seus valores iniciais
button- quando queremos adicionar um botão com uma funcionalidade personalizada em qualquer lugar de uma página da web

Button Variants

Contained Button

Use o atributo variant para adicionar um botão contido simples no seu template de componente. Note que se você não definir o variant, por padrão ele será definido como contained.

<IgrButton variant="contained"><span>Contained</span></IgrButton>

Outlined Button

Tudo o que você precisa fazer para criar um botão outlined é alterar o valor da propriedade variant:

<IgrButton variant="outlined"><span>Outlined</span></IgrButton>

Flat Button

Analogicamente, podemos mudar para a variante flat.

<IgrButton variant="flat"><span>Flat</span></IgrButton>

Floating Action Button

Podemos criar um botão de ação flutuante definindo a propriedade variant como fab:

<IgrButton variant="fab"><span>Fab</span></IgrButton>

Button Sizing

Os usuários podem alterar o tamanho do componente button usando a variável CSS--ig-size. No exemplo a seguir, adicionaremos alguns botões de opção para exibir todos os valores de tamanho. Dessa forma, sempre que um for selecionado, alteraremos o tamanho do botão.

import { IgrButton, IgrRadio, IgrRadioGroup, IgrButtonModule, IgrRadioModule, IgrRadioGroupModule } from 'igniteui-react';

<IgrRadioGroup alignment="horizontal" style={{display: 'flex', margin: '0 auto', width: '15%'}}>
    <IgrRadio name="size" value="small" labelPosition="after" checked={true} change={this.onRadioChange}>
        <span>Small</span>
    </IgrRadio>
    <IgrRadio name="size" value="medium" labelPosition="after" change={this.onRadioChange}>
        <span>Medium</span>
    </IgrRadio>
    <IgrRadio name="size" value="large" labelPosition="after" change={this.onRadioChange}>
        <span>Large</span>
    </IgrRadio>
</IgrRadioGroup>

<div>
    <IgrButton ref={this.flatButtonRef}  className="flat-btn" variant="flat"><span>Flat</span></IgrButton>
    <IgrButton ref={this.containedButtonRef}  className="contained-btn" variant="contained"><span>Contained</span></IgrButton>
    <IgrButton ref={this.outlinedButtonRef}  className="outlined-btn" variant="outlined"><span>Outlined</span></IgrButton>
    <IgrButton ref={this.fabButtonRef}  className="fab-btn" variant="fab"><span>Like</span></IgrButton>
</div>


public onRadioChange(e: any) {
    this.flatButton.size = e.value;
    this.containedButton.size = e.value;
    this.outlinedButton.size = e.value;
    this.fabButton.size = e.value;
}

O resultado da implementação do código acima deve ser semelhante ao seguinte:

Download

Definir a propriedade download solicitará que o usuário salve o URL vinculado em vez de navegar até ele.

<IgrButton
    href=""
    variant="contained"
    download="url"
    target="_blank" >
    <span>Download</span>
</IgrButton>

Styling

The IgrButton component exposes three CSS parts which we can use for styling:

Nome	Descrição
`base`	The native button element of the igc-button component.
`prefix`	The prefix container of the igc-button component.
`suffix`	The suffix container of the igc-button component.

The base CSS part allows us to style the wrapped element (<button> or <a>).

igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}