Angular Material Button

Angular Material Button Example

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.

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

  1. MatButton
  2. 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 Basic

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 with Icon

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.

Angular Material Button

I hope you like this article.

Also Read :

Work On Yourself Every Single Day.