Angular directing <mat-button> is used to create a button with content styling and animations. Angular content buttons are native <button> or elements enhanced with styling and ink ripples.
Native <button> and <a> elements are used to provide the accessible experience for users. The <button> element is used when any action is performed. An <a> element will be used when the user will navigate another view.
There are many button variants, each applied as an attribute:
| Attribute | Description |
|---|
| mat-button | It is a rectangular text button with no elevation |
| mat-raised-button | It is a rectangular contained button with elevation |
| mat-flat-button | Mat-flat-button is a rectangular contained button with no elevation |
| mat-stroked-button | It is also a Rectangular outlined button with no elevation |
| mat-icon-button | mat-icon-button is a circular button with a transparent background, meant to contain an icon |
| mat-fab | Mat-fab is a circular button default to the theme's accent color |
| mat-mini-fab | It is the same as mat-fab but smaller in size |
