Javatpoint Logo
Javatpoint Logo

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

CSS Code


Angular Material (MAT) Button

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA