Angular Material Button

Angular Material – Button : <md-button> is used to create buttons in Angular Material. Angular Material Provides you the inbuilt classes to change the button color. Here in this tutorial we are going to explain how you can create buttons in Angular Material. You can also use our online editor to edit and run the code online.

Angular Material Button Example | Demo

Let us first create first button using the Angular Material. Here is html,JavaScript And css part-

<md-button class="md-primary">Primary Button</md-button>

If you run the above example it will produce the output something like this-

Flat Button

Here are following types of flat buttons available in Angular Material. You can create Flat button – Primary Button, Disabled Button and Warning Button simply as below –

 <md-button>Button</md-button>
      <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
      <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
      <md-button class="md-warn">Warning</md-button>

If you run the above example it will produce output something like this –

Raised Button

You can create Raised button as – Primary Button, Disabled Button and Warning Button simply as below –

      <md-button class="md-raised">Button</md-button>
      <md-button class="md-raised md-primary">Primary</md-button>
      <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
      <md-button class="md-raised md-warn">Warning</md-button>

If you run the above example it will produce output something like this –

Fab Button

You can create Fab Buttons simply as below –

     <md-button class="md-fab" aria-label="Android">
            <md-icon md-svg-src="img/icons/android.svg"></md-icon>
     </md-button>

The output of the above example will be something like this –

Options

Following options are available for buttons in Angular Material-

• md-no-ink(boolean): If present, disable ripple ink effects.
• ng-disabled(expression)Used to Enable/Disable based on the expression
• md-ripple-size(string)This is used to Override the default ripple size logic. Options are: full, partial, auto.
• aria-label(string):This is used to Add alternative text to button for accessibility, useful for icon buttons. If no default text is found, a warning will be logged.

Add Comment

📖 Read More

• 1. Angular Material Card
• 2. Angular Material Checkbox
• 3. Angular Material Chips
• 4. Angular Material Colors
• 5. Angular Material Container

• 6. Angular Material Datepicker
• 7. Angular Material Dialog
• 8. Angular Material Divider
• 9. Angular Material Fab Speed Dial
• 10. Angular Material Fab Toolbar