Button

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

Demo

Usage

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

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>

Raised Button

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

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

Outlined Button

Analogically, we can switch to outlined type:

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

Icon Button

We can also use icons as buttons:

<button igxButton="icon">
  <igx-icon fontSet="material">favorite</igx-icon>
</button>

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>

Examples

Disable Button

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

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

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="raised" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
    Ripple
</button>

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="raised" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
    Span
</span>

Display Density

We can allow the user to choose the display density of the igxButton by using its displayDensity input. То do this, first we have to import the IgxButtonGroupModule, and then use the igxButtonGroup component 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

Note that 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;
}

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

Styling

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

@import '~igniteui-angular/lib/core/styles/themes/index';

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

$custom-button-theme: igx-button-theme(
    $raised-text-color: #fdfdfd,
    $raised-hover-text-color: #fdfdfd,
    $raised-background: #345779,
    $raised-hover-background: #2e4d6b,
    $raised-focus-text-color: #fdfdfd,
    $raised-focus-background: #2e4d6b,
    $disabled-color: #2e4d6b
);

In our custom theme we have provided parameter values only for the raised button. In order to implement this for any other type of button, we simply have to target the corresponding parameters.

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

Using CSS variables

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

 @include igx-css-vars($custom-button-theme);

Using Theme Overrides

In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables.

If the component is using the Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep. To prevent the custom theme to leak into other components, be sure to include the :host selector before ::ng-deep:

:host {
     ::ng-deep {
        @include igx-button($custom-button-theme);
    }
}

Demo

API References

Additional Resources

Our community is active and always welcoming to new ideas.