Angular Button Overview
Angular 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, Contained Button, Outlined 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 size 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.
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Getting Started with Ignite UI for Angular Button
To get started with the Ignite UI for Angular Button directive, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
ng add igniteui-angular
cmd
For a complete introduction to the Ignite UI for Angular, read the getting started topic.
The next step is to import the IgxButtonModule
in your app.module.ts file.
// app.module.ts
import { IgxButtonModule } from 'igniteui-angular';
// import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxButtonModule,
...
]
})
export class AppModule {}
typescript
Alternatively, as of 16.0.0
you can import the IgxButtonDirective
as a standalone dependency.
// home.component.ts
...
import { IgxButtonDirective } from 'igniteui-angular';
// import { IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<button igxButton="flat">Flat</button>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxButtonDirective]
})
export class HomeComponent {}
typescript
Now that you have the Ignite UI for Angular Button module or directive imported, you can start using the igxButton
directive on elements.
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>
html
Contained Button
All you have to do to create a contained button is to change the value of the igxButton
property:
<button igxButton="contained">Contained</button>
html
Outlined Button
Analogically, we can switch to outlined type:
<button igxButton="outlined">Outlined</button>
html
Icon Button
As of version 17.1.0
the IgniteUI for Angular exposes a new igxIconButton
directive intended to turn icons into fully functional buttons. You can read more about the Icon Button here.
<button igxIconButton="flat">
<igx-icon fontSet="material">favorite</igx-icon>
</button>
html
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>
html
To create an extended FAB, you can add any element prior to the igx-icon
:
<button class="btn" igxButton="fab">
<span>like</span>
<igx-icon fontSet="material">favorite</igx-icon>
</button>
html
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="contained" [disabled]="'true'">Disabled</button>
html
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="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
Ripple
</button>
html
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="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
Span
</span>
html
Size
We can allow the user to choose the size of the igxButton
by using the --ig-size
custom CSS property. To do this, first we have to import the IgxButtonGroupModule
, and then use the igxButtonGroup
component to display size values. This way whenever one gets selected, we will update the --ig-size CSS property.
// app.module.ts
...
import { IgxButtonGroupModule } from 'igniteui-angular';
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxButtonGroupModule
...
]
})
typescript
<!--buttons-density.component.html-->
<igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
...
<button igxButton="flat">Flat</button>
html
// buttons-density.component.ts
public size = "large";
public sizes;
public ngOnInit() {
this.sizes = [
{ label: 'large', selected: this.size === 'large', togglable: true },
{ label: 'medium', selected: this.size === 'medium', togglable: true },
{ label: 'small', selected: this.size === 'small', togglable: true }
];
}
public selectSize(event: any) {
this.size = this.sizes[event.index].label;
}
@HostBinding('style.--ig-size')
protected get sizeStyle() {
return `var(--ig-size-${this.size})`;
}
typescript
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:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss
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-contained-btn">
<button igxButton="contained">Contained button</button>
</div>
html
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,
);
scss
Take a look at the button-theme
section for a complete list of available parameters for styling any type of button.
The last step is to pass the custom button theme in our application:
.button-sample {
@include css-vars($custom-button-theme);
}
scss
Demo
Custom sizing
You can change the button height either by using the --size
variable, targeting the button
directly:
button {
--size: 50px;
}
scss
Or you can use the universal --igx-button-size
variable to target all instances:
<div class="my-app">
<button igxButton="raised"></button>
</div>
html
.my-app {
--igx-button-size: 50px;
}
scss
You can also use one of the predefined sizes, assigning it to the --ig-size
variable. The available values for --ig-size
are --ig-size-small
, --ig-size-medium
, and --ig-size-large
:
button {
--ig-size: var(--ig-size-large);
}
scss
Learn more about it in the Size article.
API References
- IgxButtonDirective
- IgxButton Styles
- IgxRippleDirective
- IgxIconButtonDirective
- IgxButtonGroupComponent
Additional Resources
Our community is active and always welcoming to new ideas.