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';

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

Usage

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:

Outlined button style:

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

Result:

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 raised 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">edit</igx-icon>
</button>

Or use icons as buttons:

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

Icon results:

Button types

Name Description
flat The default button type. Uses transparent background and the secondary theme color from the palette color for the text.
outlined Very similar to the flat button type but with a thin outline around the edges of the button.
raised As the name implies, this button type features a subtle shadow. Uses the secondary theme color from the palette for background.
fab Floating action button type. Circular with secondary theme color for background.
icon This is the simplest of button types. Use it whenever you need to use an icon as button.

API References

Additional Resources

Our community is active and always welcoming to new ideas.

View page on GitHub