Angular Material (MAT) Button

What is the MAT Button?

The <mat-button> module enhances the user experience compared to normal buttons. The <mat-button> elements are always used to provide the most direct and accessible experience for users. When the user wants to perform an action in the web-page, it uses the <mat-button>.

There are several types of buttons in angular material, and each button has its own specialty:

S. No	Button Name	Description
1.	mat-button	<mat-button> is a simple text button. Typically, it is used for less important tasks, such as Learn more, Dismiss and Got it.
2.	mat-flat-button	<mat-flat-button> is a colored button. This button is used for primary actions in a webpage.
3.	mat-raised-button	<mat-raised-button> is a colored button. It has more visibility than <mat-flat-button>. It can be used in place of <mat-flat-button>.
4.	mat-stroked-button	<mat-stroked-button> is an outlined button. There is a border around this button. Typically, it is used for more important tasks than <mat-button>.
5.	mat-icon-button	<mat-icon-button> is an icon-like button.
6.	mat-fab	<mat-fab> is a regular floating action button that is used for important actions in the desktop.
7.	mat-mini-fab	<mat-mini-fab> is also like a floating action button but its size is less than the <mat-fab> button.

Themes of the button

The background color can be set to Primary, Pronunciation, or Warning using the color property to reference the current theme of the button.

Button Text Capitalization

Material design requires capitalizing the spectral button text, although we have not opted to capitalize the button automatically via text-transformation:uppercase, as this can cause problems in some places.

API reference for Angular Material button

Example: All buttons

TS Code

import {Component} from '@angular/core';

/**
 * @title Button varieties
 */
@Component({
  selector: 'button-types-example',
  templateUrl: 'button-types-example.html',
  styleUrls: ['button-types-example.css'],
})
export class ButtonTypesExample {}

CSS Code

.example-button-row button,
.example-button-row a {
  margin-right: 8px;
}

HTML Code

<h3> Basic Button </h3>
<div class = " example " >
  <button mat-button> Basic </button>
</div>

<h3> Raised Button </h3>
<div class = " example " >
  <button mat-raised-button>Basic</button>
</div>

<h3> Stroked Button </h3>
<div class = " example " >
  <button mat-stroked-button> Basic </button>
  <a mat-stroked-button routerLink = "."> Link </a>
</div>

<h3> Flat Button </h3>
<div class = " example " >
  <button mat-flat-button> Basic </button>
  <a mat-flat-button routerLink = "."> Link </a>
</div>

<h3> Icon Button </h3>
<div class = " example " >
  <button mat-icon-button aria-label = "Example icon-button with a heart icon" >
    <mat-icon>favorite</mat-icon>
  </button>
</div>
<h3> Fab Button </h3>
<div class = "example " >
  <button mat-fab> Basic </button>
  <a mat-fab routerLink = "."> Link </a>
</div>

<h3> Mini Fab Button </h3>
<div class = " example " >
  <button mat-mini-fab> Basic </button>
 <a mat-mini-fab routerLink = "."> Link </a>
</div>