Javatpoint Logo
Javatpoint Logo

Angular Material- Buttons

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

Theming

Buttons can also be colored in terms of the current theme using the color property to set the background color to primary, accent, or warn.

Capitalization

Button text has to be capitalized. However, we have opted not to automatically capitalize buttons by text-transform: uppercase because it causes certain locales issues.

Accessibility

Angular content uses the original <button> and <diagram> elements to ensure an accessible experience by default. The <button> element is used for any interaction that acts on the current page. The <a> element must be used for any interaction navigating to any other view.

Only buttons or links with icons (such as mat-fab, mat-mini-fab, and mat-icon-buttons) should be given a meaningful label via the area-label.

We should follow the steps given below to update the Angular application created in Angular content:

Step 1: Create a Project with the name Content App.

Step 2: Modify app.module.ts, app.component.ts, app.component.css, and app.component.html as given below. Keep the remaining files unchanged.

Step 3: Compile and run the application to validate the result of the logic that is applicable.

Let's follow the steps and create different types of buttons.

app.component.html

app.module.ts

app.component.css

Output:

Angular Material Buttons

Let's create another module to create buttons.

app.module.ts

app.component.css

app.component.html

Output:

Angular Material Buttons




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA