Button

The Button directive within Ignite UI for Angular is intended to be used on any button, span, div, or anchor element to turn it into a fully functional button.

Button Demo

Dependencies

The Button Directive is exported as an NgModule, thus all you need to do in your application is to import the IgxButtonModule inside your AppModule:

// app.module.ts

import { IgxButtonModule } from 'igniteui-angular/main';

@NgModule({
    imports: [
        ...
        IgxButtonModule,
        ...
    ]
})
export class AppModule {}

Examples

Setting a simple igxButton. Note that if you do not choose a type, by default it will be set to flat.

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

Result:

You can add a Ripple effect. And also set its color igxRipple="blue".

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

Default ripple color. Custom ripple color:

Using igxButton to turn a span element into a Ignite UI for Angular styled button.

<span igxButton="raised" igxButtonColor="yellow" igxButtonBackground="#000" igxRipple="yellow">Click me</span>

The span now looks like:

You can create a rased button.

<button igxButton="raised" igxRipple="white">Raised</button>

A floating action button and use an icon to display:

<button igxButton="fab" igxButtonColor="#FBB13C" igxButtonBackground="#340068" igxRipple="#FBB13C">
  <igx-icon fontSet="material" name="edit"></igx-icon>
</button>

Or use icons as buttons:

<button igxButton="icon" igxRipple igxRippleCentered="true">
  <igx-icon fontSet="material" name="search"></igx-icon>
</button>
<button igxButton="icon" igxRipple igxButtonColor="#E41C77" igxRippleCentered="true">
  <igx-icon fontSet="material" name="favorite"></igx-icon>
</button>

Icon results:

Button Types

Name Description
flat The default button type. Transparent background and primary theme color for text.
raised As the name implies, this button type uses subtle box-shadow. Primary theme color for background and white for text color.
gradient Same as the raised button type. Additionally you can specify a gradient value for background color.
fab Floating action button type. Circular with primary theme color for background and white text.
icon This is the simplest of button types. Use it whenever you need to use an icon as button.
navbar Same as the icon button type, albeit optimized for use with the igx-navbar component.

API Summary

In this article we covered the different button types. The Button directive has a few more APIs to explore, which are listed below.

Inputs

The following inputs are available on the igxButton directive:

Name Type Description
igxButton string Set the type of igxButton to be used. Default is set to flat.
igxButtonColor string Set the button text color. You can pass any CSS valid color value.
igxButtonBackground string Set the button background color. You can pass any CSS valid color value.

Additional Resources

Our community is active and always welcoming to new ideas.