Buttons

All mat-button variants: basic, raised, stroked, flat, FAB, mini-FAB, and icon buttons.

Basic Variants

mat-button, mat-raised-button, mat-stroked-button, mat-flat-button with color variants.

<button mat-button>Basic</button>
<button mat-raised-button color="primary">Primary</button>
<button mat-stroked-button color="accent">Accent</button>
<button mat-flat-button color="warn">Warn</button>
<button mat-raised-button color="primary" disabled>Disabled</button>

Floating Action Buttons

mat-fab, mat-mini-fab, and extended FAB with icons.

<button mat-fab color="primary" aria-label="Add">
  <mat-icon>add</mat-icon>
</button>
<button mat-mini-fab color="accent" aria-label="Edit">
  <mat-icon>edit</mat-icon>
</button>
<button mat-fab extended color="primary">
  <mat-icon>thumb_up</mat-icon>
  Extended FAB
</button>
<button mat-fab disabled aria-label="Disabled">
  <mat-icon>block</mat-icon>
</button>

Icon Buttons

mat-icon-button with different colors and states.

<button mat-icon-button aria-label="Favorite">
  <mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button color="primary" aria-label="Home">
  <mat-icon>home</mat-icon>
</button>
<button mat-icon-button color="accent" aria-label="Settings">
  <mat-icon>settings</mat-icon>
</button>
<button mat-icon-button color="warn" aria-label="Delete">
  <mat-icon>delete</mat-icon>
</button>
<button mat-icon-button disabled aria-label="Disabled">
  <mat-icon>block</mat-icon>
</button>