A quick bit of trivia here—ave you seen any website or application without any sort of buttons? If you have, please write to me.

As far as my experience goes, buttons are an integral part of web applications. In this section, we will learn all about buttons, button groups, and indicators. 

Angular Material provides a lot of useful and easy attributes that we can attach to the button tags, and, voila. Magic happens. The simplest way to start using an Angular Material button is by adding a mat-button attribute to the <button> tag:

<div>
<button mat-button>Simple Button</button>
<button mat-button color="primary">Primary Button</button>
<button mat-button color="accent">Accent Button</button>
<button mat-button color="warn">Warn Button</button>
<button mat-button disabled>Disabled</button>
<a mat-button routerLink=".">Link</a>
</div>

In the preceding code, we added the mat-button attribute to all the buttons that we have added to our material-button.component.html template file. We also customized the look, feel, and the behavior of the buttons using properties such as color and disabled. The output of the preceding code is displayed as follows:

The buttons in the preceding screenshot appear more like links and not buttons, right? Let's customize them to make them look more like buttons. We can easily do this by adding the  mat-raised-button attribute. Notice that in the previous example, we used the mat-button attribute, and in this example, we are adding mat-raised-button. The updated code is as follows:

<div>
  <button mat-raised-button>Basic Button</button>
  <button mat-raised-button color="primary">Primary Button</button>
  <button mat-raised-button color="accent">Accent Button</button>
  <button mat-raised-button color="warn">Warn Button</button>
  <button mat-raised-button disabled>Disabled Button</button>
  <a mat-raised-button routerLink=".">Link</a>
</div>

The output of the preceding code is as follows. Notice the difference in the look and feel of the buttons now that the new attribute has been added:

They are pretty buttons! Using the predefined attributes allows us to maintain the uniformity of the buttons across the application.

Next, we are going to explore the indicators provided by Angular Material. We will learn about badges and progress bar components as part of the indicator components.

Badges are a way to highlight some data along with other UI elements. We may come across use cases where we want to use badges along with buttons. You must already be thinking, can we also add some UX for the buttons to design some functionality, too? Yes, we can!

Angular Material provides a module called MatBadgeModule, which has implementations for the matBadge, matBadgePosition, and matBadgeColor attributes, which can easily be used to set badges to the buttons. Take a look at the following sample code:

<button mat-raised-button color="primary"
 matBadge="10" matBadgePosition="before" matBadgeColor="accent">
 Left Badge
</button>

In the preceding code, we added a button element, and we specified the attributes, such as matBadge, matBadgePosition, and matBadgeColor. The output of the preceding code is as follows:

This was a button with badges. There is another UI component called chips. We can easily use these in order to enhance the UX as well. Think of material chips as tags in any other application you have used previously. Angular Material provides a module called MatChipModule, which provides the <mat-chip-list> and <mat-chip> directives, which we can easily integrate into our application. Take a look at the following sample code:

<mat-chip-list>
<mat-chip color="primary" selected>New York</mat-chip>
<mat-chip>London</mat-chip>
<mat-chip>Dallas</mat-chip>
<mat-chip>Accent fish</mat-chip>
</mat-chip-list>

In the preceding code, we used the directives resulting from MatChipModule, and from putting together the tags. The output of the preceding code is as follows:

That was neat. The next indicator that we will learn to implement is a very important one; the progress bar. We need to show and inform our users about actions that are being performed in the background, or show the progress of processing some user data. In such situations, we will need to clearly show this using a progress bar.

Angular Material provides modules named MatProgressBarModule and MatProgressSpinnerModule, using which, we can easily add a loading icon or spinner to our web application. Using the API properties and events, we can easily capture and process the data as well. Take a look at the following sample code:

<mat-spinner></mat-spinner>

That's it? Really? Are we kidding? No, we are not. Just by using this module, we should see the spinning wheel displayed in our application. Take a look at the output of the preceding code:

In the next section, we will learn all about the modals and dialog windows that are provided by Angular Material.