Visão geral do botão Angular

    A diretiva Angular Button é usada para criar e adicionar botões acionáveis a uma página/aplicativo da web. Existem diferentes tipos de Angular Button que são fáceis de personalizar e incluem vários recursos integrados. Por padrão, Angular Material usa elementos nativos <button> e <a> para fornecer uma experiência acessível.

    A diretiva Ignite UI for Angular Button tem como objetivo transformar qualquer botão, span, div ou elemento de âncora em um botão totalmente funcional. Você pode usar os seguintes tipos de Angular Button - Flat Button, Contained Button, Outlined Button e Floating Action Button. Com cores personalizáveis, opções para criar temas e alterar o Angular Button Style e permitir que os usuários escolham o tamanho do botão e muito mais.

    Angular Button Example

    Criamos o exemplo do botão Angular abaixo para mostrar como diferentes tipos de botões podem aparecer e parecer quando são estilizados com uma borda ou quando um fundo transparente é aplicado.

    Getting Started with Ignite UI for Angular Button

    Para começar a usar a diretiva Ignite UI for Angular Button, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar o IgxButtonModule no seu arquivo app.module.ts.

    // app.module.ts
import { IgxButtonModule } from 'igniteui-angular';
// import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
    imports: [
        ...
        IgxButtonModule,
        ...
    ]
})
export class AppModule {}

    Como alternativa, a partir da 16.0.0 você pode importar o IgxButtonDirective como uma dependência autônoma.

    // home.component.ts

...
import { IgxButtonDirective } from 'igniteui-angular';
// import { IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<button igxButton="flat">Flat</button>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxButtonDirective]
})
export class HomeComponent {}

    Agora que você importou o módulo ou a diretiva Ignite UI for Angular Button, você pode começar a usar a diretiva igxButton nos elementos.

    Angular Button Types

    Flat Button

    Use a diretiva igxButton para adicionar um botão simples e plano no seu template de componente. Note que se você não escolher um tipo, por padrão ele será definido como flat.

    <button igxButton="flat">Flat</button>

    Contained Button

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

    <button igxButton="contained">Contained</button>

    Outlined Button

    Analogicamente, podemos mudar para o tipo de contorno:

    <button igxButton="outlined">Outlined</button>

    Botão de ícone

    A partir da versão 17.1.0 o IgniteUI para Angular expõe uma nova diretiva igxIconButton destinada a transformar ícones em botões totalmente funcionais. Você pode ler mais sobre o Icon Button aqui.

    <button igxIconButton="flat">
  <igx-icon fontSet="material">favorite</igx-icon>
</button>

    Floating Action Button

    Podemos criar um botão de ação flutuante e usar um ícone para exibir:

    <button igxButton="fab">
  <igx-icon fontSet="material">edit</igx-icon>
</button>

    Para criar um FAB estendido, você pode adicionar qualquer elemento antes do igx-icon:

    <button class="btn" igxButton="fab">
  <span>like</span>
  <igx-icon fontSet="material">favorite</igx-icon>
</button>
    Note

    Para estilizar corretamente o texto FAB estendido, use as tags <span> ou <div>.

    Examples

    Angular Disable Button

    A propriedade disabled pode ser usada para tornar um botão não clicável:

    <button igxButton="contained" [disabled]="'true'">Disabled</button>

    Ondulação

    A diretiva igxRipple adiciona um efeito ripple aos seus botões ou outros elementos especificados. Você pode facilmente alterar a cor, posição e duração padrão do ripple, usando suas propriedades:

    <button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
  Ripple
</button>

    Span

    Também podemos usar a diretiva igxButton para transformar elementos como span e div em Ignite UI for Angular. As cores padrão podem ser personalizadas por meio das propriedades igxButtonColor e igxButtonBackground:

    <span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
  Span
</span>

    Tamanho

    Podemos permitir que o usuário escolha o tamanho do igxButton usando a propriedade CSS personalizada--ig-size. Para fazer isso, primeiro temos que importar o IgxButtonGroupModule e, em seguida, usar o componente igxButtonGroup para exibir valores de tamanho. Dessa forma, sempre que um for selecionado, atualizaremos a propriedade CSS--ig-size.

    // app.module.ts
...
import { IgxButtonGroupModule } from 'igniteui-angular';
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
    imports: [
        ...
        IgxButtonGroupModule
        ...
    ]
})

    <!--buttons-density.component.html-->
<igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
...
<button igxButton="flat">Flat</button>

    // buttons-density.component.ts
public size = "large";
public sizes;
public ngOnInit() {
    this.sizes = [
        { label: 'large', selected: this.size === 'large', togglable: true },
        { label: 'medium', selected: this.size === 'medium', togglable: true },
        { label: 'small', selected: this.size === 'small', togglable: true }
    ];
}

public selectSize(event: any) {
    this.size = this.sizes[event.index].label;
}


@HostBinding('style.--ig-size')
protected get sizeStyle() {
    return `var(--ig-size-${this.size})`;
}

    Se tudo correr bem, você deverá ver algo como o seguinte no navegador:

    Estilização

    Para começar a estilizar o botão, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Seguindo a abordagem mais simples, criamos um novo tema que estende o button-theme e aceita os parâmetros $foreground e $background com seus respectivos parâmetros hover e focus.

    Dada a seguinte marcação:

    <div class="my-contained-btn">
  <button igxButton="contained">Contained button</button>
</div>

    Precisamos criar um tema:

    $custom-button-theme: button-theme(
  $foreground: #fdfdfd,
  $hover-foreground: #fdfdfd,
  $focus-foreground: #fdfdfd,
  $background: #345779,
  $hover-background: #2e4d6b,
  $focus-background: #2e4d6b,
  $disabled-foreground: #2e4d6b,
);

    Dê uma olhada na seção button-theme para obter uma lista completa de parâmetros disponíveis para estilizar qualquer tipo de botão.

    O último passo é passar o tema do botão personalizado em nossa aplicação:

    .button-sample {
  @include css-vars($custom-button-theme);
}

    Demo

    Custom sizing

    Você pode alterar a altura do botão usando a variável--size, direcionando o button diretamente:

    button {
  --size: 50px;
}

    Ou você pode usar a variável universal--igx-button-size para atingir todas as instâncias:

    <div class="my-app">
  <button igxButton="raised"></button>
</div>

    .my-app {
  --igx-button-size: 50px;
}

    Você também pode usar um dos tamanhos predefinidos, atribuindo-o à variável--ig-size. Os valores disponíveis para--ig-size são--ig-size-small,--ig-size-medium e--ig-size-large:

    button {
  --ig-size: var(--ig-size-large);
}

    Saiba mais sobre isso no artigo Tamanho.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.