Angular Button Overview

    Angular Button directive is used for creating and adding actionable buttons to a web page/application. There are different Angular Button types that are easy to customize and include several built-in features. By default, Angular Material uses native <button> and <a> elements to deliver an accessible experience.

    The Ignite UI for Angular Button directive is intended to turn any button, span, div, or anchor element into a fully functional button. You can use the following Angular Button types - Flat Button, Contained Button, Outlined Button, and Floating Action Button. With customizable colors, options to create themes and change the Angular Button Style and enabling users to choose the button size and more.

    Angular Button Example

    We have created the Angular Button example below to show you how different button types can appear and look like when they are styled with a border or when a transparent background is applied.

    EXAMPLE

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    Getting Started with Ignite UI for Angular Button

    To get started with the Ignite UI for Angular Button directive, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

    ng add igniteui-angular
    cmd

    For a complete introduction to the Ignite UI for Angular, read the getting started topic.

    The next step is to import the IgxButtonModule in your app.module.ts file.

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

    Alternatively, as of 16.0.0 you can import the IgxButtonDirective as a standalone dependency.

    // 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 {}
    typescript

    Now that you have the Ignite UI for Angular Button module or directive imported, you can start using the igxButton directive on elements.

    Angular Button Types

    Flat Button

    Use the igxButton directive to add a simple flat button in your component template. Note that if you do not choose a type, by default it will be set to flat.

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

    Contained Button

    All you have to do to create a contained button is to change the value of the igxButton property:

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

    Outlined Button

    Analogically, we can switch to outlined type:

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

    Icon Button

    As of version 17.1.0 the IgniteUI for Angular exposes a new igxIconButton directive intended to turn icons into fully functional buttons. You can read more about the Icon Button here.

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

    Floating Action Button

    We can create a floating action button and use an icon to display:

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

    To create an extended FAB, you can add any element prior to the igx-icon:

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

    To get the extended FAB text styled properly, use <span> or <div> tags.

    Examples

    Angular Disable Button

    The disabled property can be used to make a button unclickable:

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

    Ripple

    The igxRipple directive adds a ripple effect to your buttons or other specified elements. You can easily change the default ripple color, position and duration, using its properties:

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

    Span

    We can also use the igxButton directive to turn elements like span and div into Ignite UI for Angular styled buttons. The default colors can be customized via the igxButtonColor and the igxButtonBackground properties:

    <span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
      Span
    </span>
    html
    App Builder | CTA Banner

    Size

    We can allow the user to choose the size of the igxButton by using the --ig-size custom CSS property. To do this, first we have to import the IgxButtonGroupModule, and then use the igxButtonGroup component to display size values. This way whenever one gets selected, we will update the --ig-size CSS property.

    // app.module.ts
    ...
    import { IgxButtonGroupModule } from 'igniteui-angular';
    // import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
    @NgModule({
        imports: [
            ...
            IgxButtonGroupModule
            ...
        ]
    })
    typescript
    <!--buttons-density.component.html-->
    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
    ...
    <button igxButton="flat">Flat</button>
    html
    // 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})`;
    }
    typescript

    If all went well, you should see something like the following in the browser:

    EXAMPLE

    Styling

    To get started with styling the button, we need to import the index file, where all the theme functions and component mixins live:

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

    Following the simplest approach, we create a new theme that extends the button-theme and accepts the $foreground and the $background parameters with their respective hover and focus parameters.

    Given the following markup:

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

    We need to create a theme:

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

    Take a look at the button-theme section for a complete list of available parameters for styling any type of button.

    The last step is to pass the custom button theme in our application:

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

    Demo

    EXAMPLE

    Custom sizing

    You can change the button height either by using the --size variable, targeting the button directly:

    button {
      --size: 50px;
    }
    scss

    Or you can use the universal --igx-button-size variable to target all instances:

    <div class="my-app">
      <button igxButton="raised"></button>
    </div>
    html
    .my-app {
      --igx-button-size: 50px;
    }
    scss

    You can also use one of the predefined sizes, assigning it to the --ig-size variable. The available values for --ig-size are --ig-size-small, --ig-size-medium, and --ig-size-large:

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

    Learn more about it in the Size article.

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.