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 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">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.

Display Density

We can allow the user to choose the display density of the igxButton by using its displayDensity input. We will do this by importing the IgxButtonGroupModule and using the IgxButtonGroup to display all density values. This way whenever one gets selected, we will update our own density property that is bound to the displayDensity of the button.

Note

The icon type button does not introduce visual changes for different display density values.

// app.module.ts
...
import { IgxButtonGroupModule } from 'igniteui-angular';
@NgModule({
    imports: [..., IgxButtonGroupModule]
})
<!--buttons-density.component.html-->

<igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)"></igx-buttongroup>
...
<button igxButton="flat" [displayDensity]="density">Flat</button>
// buttons-density.component.ts
public density = "comfortable";
public displayDensities;
public ngOnInit() {
    this.displayDensities = [
        { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
        { label: 'cosy', selected: this.density === 'cosy', togglable: true },
        { label: 'compact', selected: this.density === 'compact', togglable: true }
    ];
}
public selectDensity(event) {
    this.density = this.displayDensities[event.index].label;
}

And the final result:

API References

Additional Resources

Our community is active and always welcoming to new ideas.