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" (selected)="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.