Angular Material button module MatButtonModule(mat-button,mat-raised-button,mat-icon-button,mat-fab,mat-mini-fab) enhances the user experience of normal buttons (<button>) and anchor (<a>)tags by following Material design principles.
The primary button type is raised button type, provided by Angular material design when we talk about high click-through rate (CTR) then there is no best option available option then the raised button in Material design.
Table of Contents
Angular Material Design Buttons Types
There are several button variants, each applied as an attribute:
- Basic Buttons
- Raised Buttons
- Stroked Buttons
- Flat Buttons
- Icon Buttons
- Fab Buttons
- Mini Fab Buttons
MatButtonModule contains two directives
- MatButton
- MatAnchor
MatButton Directive
The MatButton directive includes definitions for the material design button and is exported as a matButton.
And the selector is
button[mat-button]button[mat-raised-button]button[mat-icon-button]button[mat-fab]button[mat-mini-fab]button[mat-stroked-button]button[mat-flat-button]
MatAnchor Directive
MatAnchor directive extends MatButton contains definitions for raised material design button and exported as matAnchor or matButton.
And the selector is
- a[mat-button]
- a[mat-raised-button]
- a[mat-icon-button]
- a[mat-fab]
- a[mat-mini-fab]
- a[mat-stroked-button]
- a[mat-flat-button]
Angular Material Button Basic
Use the below code to create basic material design buttons in primary, accent, warn, disabled and link buttons.
app.component.html
<section>
<div class="example-label">Basic</div>
<div class="example-button-row">
<button mat-button="">Basic</button>
<button mat-button="" color="primary">Primary</button>
<button mat-button="" color="accent">Accent</button>
<button mat-button="" color="warn">Warn</button>
<button mat-button="" disabled="">Disabled</button>
<a mat-button="" href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Link</a>
</div>
</section>
Output :
Following will be the output for above material design buttons code.
Angular Material Button Example with Icon
We can use angular material icons as buttons. We need to add mat-icon-button attribute to button and use mat-icon tag to display icon.
Before we create Angular material icon buttons we need to import MatIconModule service in angular-material.module.ts file, and paste the following code.
app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MaterialExampleModule} from '../material.module';
import {ButtonOverviewExample} from './button-overview-example';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatNativeDateModule} from '@angular/material/core';
import {HttpClientModule} from '@angular/common/http';
@NgModule({
declarations: [ButtonOverviewExample],
imports: [
BrowserAnimationsModule,
BrowserModule,
FormsModule,
HttpClientModule,
MatNativeDateModule,
MaterialExampleModule,
ReactiveFormsModule,
],
providers: [],
bootstrap: [ButtonOverviewExample],
})
export class AppModule {}
You can use the following code in your Angular template to create icon buttons.
app.component.html
<section>
<div class="example-label">Icon</div>
<div class="example-button-row">
<div class="example-flex-container">
<button mat-icon-button="" aria-label="Example icon button with a vertical three dot icon">
<mat-icon>more_vert</mat-icon>
</button>
<button mat-icon-button="" color="primary" aria-label="Example icon button with a home icon">
<mat-icon>home</mat-icon>
</button>
<button mat-icon-button="" color="accent" aria-label="Example icon button with a menu icon">
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button="" color="warn" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button="" disabled="" aria-label="Example icon button with a open in new tab icon">
<mat-icon>open_in_new</mat-icon>
</button>
</div>
</div>
</section>
Output :
Following will be the output for above material design buttons code.
Angular Material Button Example All in One
<section>
<div class="example-label">Basic</div>
<div class="example-button-row">
<button mat-button="">Basic</button>
<button mat-button="" color="primary">Primary</button>
<button mat-button="" color="accent">Accent</button>
<button mat-button="" color="warn">Warn</button>
<button mat-button="" disabled="">Disabled</button>
<a mat-button="" href="https://www.google.com/" target="_blank" rel="Angular MAterial Button noopener noreferrer">Link</a>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Raised</div>
<div class="example-button-row">
<button mat-raised-button="">Basic</button>
<button mat-raised-button="" color="primary">Primary</button>
<button mat-raised-button="" color="accent">Accent</button>
<button mat-raised-button="" color="warn">Warn</button>
<button mat-raised-button="" disabled="">Disabled</button>
<a mat-raised-button="" href="https://www.google.com/" target="_blank" rel="Angular Material Button noopener noreferrer">Link</a>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Stroked</div>
<div class="example-button-row">
<button mat-stroked-button="">Basic</button>
<button mat-stroked-button="" color="primary">Primary</button>
<button mat-stroked-button="" color="accent">Accent</button>
<button mat-stroked-button="" color="warn">Warn</button>
<button mat-stroked-button="" disabled="">Disabled</button>
<a mat-stroked-button="" href="https://www.google.com/" target="_blank" rel="Angular Material Button noopener noreferrer">Link</a>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Flat</div>
<div class="example-button-row">
<button mat-flat-button="">Basic</button>
<button mat-flat-button="" color="primary">Primary</button>
<button mat-flat-button="" color="accent">Accent</button>
<button mat-flat-button="" color="warn">Warn</button>
<button mat-flat-button="" disabled="">Disabled</button>
<a mat-flat-button="" href="https://www.google.com/" target="_blank" rel="Angular Material Button noopener noreferrer">Link</a>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Icon</div>
<div class="example-button-row">
<div class="example-flex-container">
<button mat-icon-button="" aria-label="Example icon button with a vertical three dot icon">
<mat-icon>more_vert</mat-icon>
</button>
<button mat-icon-button="" color="primary" aria-label="Example icon button with a home icon">
<mat-icon>home</mat-icon>
</button>
<button mat-icon-button="" color="accent" aria-label="Example icon button with a menu icon">
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button="" color="warn" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button="" disabled="" aria-label="Example icon button with a open in new tab icon">
<mat-icon>open_in_new</mat-icon>
</button>
</div>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">FAB</div>
<div class="example-button-row">
<div class="example-flex-container">
<div class="example-button-container">
<button mat-fab="" color="primary" aria-label="Example icon button with a delete icon">
<mat-icon>delete</mat-icon>
</button>
</div>
<div class="example-button-container">
<button mat-fab="" color="accent" aria-label="Example icon button with a bookmark icon">
<mat-icon>bookmark</mat-icon>
</button>
</div>
<div class="example-button-container">
<button mat-fab="" color="warn" aria-label="Example icon button with a home icon">
<mat-icon>home</mat-icon>
</button>
</div>
<div class="example-button-container">
<button mat-fab="" disabled="" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
</div>
</div>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Mini FAB</div>
<div class="example-button-row">
<div class="example-flex-container">
<div class="example-button-container">
<button mat-mini-fab="" color="primary" aria-label="Example icon button with a menu icon">
<mat-icon>menu</mat-icon>
</button>
</div>
<div class="example-button-container">
<button mat-mini-fab="" color="accent" aria-label="Example icon button with a plus one icon">
<mat-icon>plus_one</mat-icon>
</button>
</div>
<div class="example-button-container">
<button mat-mini-fab="" color="warn" aria-label="Example icon button with a filter list icon">
<mat-icon>filter_list</mat-icon>
</button>
</div>
<div class="example-button-container">
<button mat-mini-fab="" disabled="" aria-label="Example icon button with a home icon">
<mat-icon>home</mat-icon>
</button>
</div>
</div>
</div>
</section>
section {
display: table;
}
.example-label {
display: table-cell;
font-size: 14px;
margin-left: 8px;
min-width: 120px;
}
.example-button-row {
display: table-cell;
width: 490px;
}
.example-button-row .mat-button-base {
margin: 8px 8px 8px 0;
}
.example-flex-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.example-button-container {
display: flex;
justify-content: center;
width: 120px;
}
Following will be the output for above material design buttons code.
I hope you like this amazing article.
Also Read :
- Angular Material Grid Layout Example
- Angular Material Card Example
- Angular Material List Example
- How to convert string to number in javascript or typescript
- Angular Material Date Range Picker
- Angular Material AutoComplete Dropdown Example
- Angular Material Select Change Event Example
- typescript string to number
Work On Yourself Every Single Day.