Angular Button Overview
Angular Material Button directive is used for creating and adding actionable buttons to a web page/application. There are different Angular Button types that are easy to customize and include several built-in features. By default, Angular Material uses native <button>
and <a>
elements to deliver an accessible experience.
The Ignite UI for Angular Button directive is intended to turn any button, span, div, or anchor element into a fully functional button. You can use the following Angular Button types - Flat Button, Raised Button, Outlined Button, Icon Button and Floating Action Button. With customizable colors, options to create themes and change the Angular Button Style and enabling users to choose the button display density and more.
Angular Button Example
We have created the Angular Button example below to show you how different button types can appear and look like when they are styled with a border or when a transparent background is applied.
How To Use Angular Button With Ignite UI
The Angular 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';
// import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxButtonModule,
...
]
})
export class AppModule {}
Angular 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>
igxButton
property:
html
<button igxButton="raised">Raised</button>
html
<button igxButton="outlined">Outlined</button>
html
<button igxButton="icon">
<igx-icon fontSet="material">favorite</igx-icon>
</button>
html
<button igxButton="fab">
<igx-icon fontSet="material">edit</igx-icon>
</button>
To create an extended FAB, you can add any element prior to the igx-icon
:
html
<button class="btn" igxButton="fab">
<span>like</span>
<igx-icon fontSet="material">favorite</igx-icon>
</button>
>[!NOTE]
>To get the extended FAB text styled properly, use <span>
or <div>
tags.
Examples
Angular Disable Button
The disabled
property can be used to make a button unclickable:
<button igxButton="raised" [disabled]="'true'">Disabled</button>
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:
html
<button igxButton="raised" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
Ripple
</button>
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:
html
<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 Angular buttonAngular 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';
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@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;
}
If all went well, you should see something like the following in the browser:
Angular Button Styling
To get started with styling the button, we need to import the index
file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Following the simplest approach, we create a new theme that extends the button-theme
and accepts the $foreground
and the $background
parameters with their respective hover and focus parameters.
Given the following markup:
<div class="my-raised-btn">
<button igxButton="raised">Raised button</button>
</div>
We need to create a theme:
$custom-button-theme: button-theme(
$foreground: #fdfdfd,
$hover-foreground: #fdfdfd,
$focus-foreground: #fdfdfd,
$background: #345779,
$hover-background: #2e4d6b,
$focus-background: #2e4d6b,
$disabled-foreground: #2e4d6b
);
Take a look at the 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:
.my-raised-btn {
@include 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 {
.my-raised-btn {
@include button($custom-button-theme);
}
}
}
Demo
API References
- IgxButtonDirective
- IgxButton Styles
- IgxRippleDirective
- IgxButtonGroupComponent ## Additional Resources Our community is active and always welcoming to new ideas.
- Ignite UI for Angular Forums
- Ignite UI for Angular GitHub