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

To get started with the Button directive, first you need to install Ignite UI for Angular by typing the following command:

ng add igniteui-angular

For a complete introduction to the Ignite UI for Angular, read the getting started topic.

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.

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:

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 parameters and the focus parameters.

$dark-button: igx-button-theme(
    $raised-text-color: #FFCD0F, 
    $raised-hover-text-color: #292826, 
    $raised-background: #292826,
    $raised-hover-background: #FFCD0F,
    $raised-focus-text-color: #292826,
    $raised-focus-background: #FFCD0F,
    $raised-border-radius: 10px,
    $disabled-color: #16130C
);

In the theme from above, we have obviously provided parameter values only for the raised buttons and in order to implement this for any other type of button, the approach is analogical - we simply have to target the parameters that are specific for the button type we wish to style. If we take a look at the igx-button-theme, we will notice the vast amount of parameters that are available to us in order to style any type of button!

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

@include igx-button($dark-button);
Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep:

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

Defining a color palette

Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the igx-palette and igx-color functions.

igx-palette generates a color palette based on the primary and secondary colors that are passed:

$yellow-color: #FFCD0F;
$black-color: #292826;

$dark-palette: igx-palette($primary: $black-color, $secondary: $yellow-color);

And then with igx-color we can easily retrieve color from the palette.

$dark-button: igx-button-theme(
    $palette: $dark-palette,
    $raised-text-color: igx-color($dark-palette, "secondary", 700),
    $raised-hover-text-color: igx-color($dark-palette, "primary", 500),
    $raised-background:  igx-color($dark-palette, "primary", 500),
    $raised-hover-background: igx-color($dark-palette, "secondary", 500),
    $raised-focus-text-color: igx-color($dark-palette, "primary", 500),
    $raised-focus-background: igx-color($dark-palette, "secondary", 500),
    $disabled-color: #16130C
);
Note

The igx-color and igx-palette are powerful functions for generating and retrieving colors. Please refer to Palettes topic for detailed guidance on how to use them.

Using Schemas

Going further with the theming engine, you can build a robust and flexible structure that benefits from schemas. A schema is a recipe of a theme.

Extend one of the two predefined schemas, that are provided for every component, in this case - the dark-button schemas:

// Extending the dark button schema
$dark-button-schema: extend($_dark-button,
    (
        raised-text-color:(
            igx-color:("secondary", 700)
        ),
        raised-hover-text-color:(
            igx-color:("primary", 500)
        ),
        raised-background:(
            igx-color:("primary", 500)
        ),
        raised-hover-background:(
            igx-color:("secondary", 500)
        ),
        raised-focus-text-color:(
            igx-color:("primary", 500)
        ),
        raised-focus-background:(
            igx-color:("secondary", 500)
        ),
        disabled-color: #16130C
    )
);

In order to apply our custom schemas we have to extend one of the globals (light or dark), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes:

// Extending the global dark-schema
$custom-dark-schema: extend($dark-schema,(
    igx-button: $dark-button-schema
));

// Defining button-theme with the global dark schema
$dark-button: igx-button-theme(
  $palette: $dark-palette,
  $schema: $custom-dark-schema
);

Don't forget to include the themes in the same way as it was demonstrated above.

Demo

API References

Additional Resources

Our community is active and always welcoming to new ideas.