Visão geral do botão React

    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

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

    npm install igniteui-react

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

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

    <IgrButton />

    Prefix / Suffix

    Com prefix e suffix slots do IgrButton componente, podemos adicionar conteúdo diferente antes e depois do conteúdo principal do botão.

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

    Type

    O componente de botão mudará sua estrutura interna de um <button> elemento de tipo para um <a> quando o href atributo for definido. Nesse caso, o botão pode ser pensado como um link regular. Definir o href atributo permitirá que você também defina os atributos e . target​ ​rel​ ​download No caso em que o componente de botão usa um elemento real <button> internamente, podemos especificá-lo displayType definindo a propriedade como qualquer um dos seguintes valores:

    • 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

    O IgrButton componente expõe três partes CSS que podemos usar para estilizar:

    Nome Descrição
    base O elemento de botão nativo do componente igc-button.
    prefix O contêiner de prefixo do componente igc-button.
    suffix O contêiner de sufixo do componente igc-button.

    A base parte CSS nos permite estilizar o elemento encapsulado (<button> ou <a>).

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

    API References

    Additional Resources