Button links

Buttons are included with the .md-button directive. You can make all sorts og buttons from links to raised and not raised buttons. All including the styling of material design.

Disabled sytling can be done using ng-disabled="true" attribute.

Code Fill Filled style Disabled style
.md-default Button Button
.md-primary Primary Primary
.md-accent Accent Accent
.md-success Success Success
.md-info Info Info
.md-warning Warning Warning
.md-danger Danger Danger

Raised buttons

Buttons are included with the .md-button directive. You can make all sorts og buttons from links to raised and not raised buttons. All including the styling of material design.

Disabled sytling can be done using ng-disabled="true" attribute.

Code Fill Filled style Disabled style
.md-default Button Button
.md-primary Primary Primary
.md-accent Accent Accent
.md-success Success Success
.md-info Info Info
.md-warning Warning Warning
.md-danger Danger Danger

Fabs

Fabs are an amazing and very functional style of buttons. They can be used pretty much anywhere to give quick actions to the user.

Fabs can be inserted using class="md-fab" and inserting an SVG icon inside (available inside the theme with the material design collection of SVG Images).

All previous variations are available for fabs as well.

Code Fill Filled style Disabled
.md-default
.md-primary
.md-accent
.md-success
.md-info
.md-warning
.md-danger

Speed dial Fabs

Fabs are an amazing and very functional style of buttons. They can be used pretty much anywhere to give quick actions to the user.

Fabs can be inserted using class="md-fab" and inserting an SVG icon inside (available inside the theme with the material design collection of SVG Images).

All previous variations are available for fabs as well.

You may supply a direction of left, up, down, or right through the md-direction attribute.


Direction {{direction}}
Open/Closed Open Closed
Animation Modes {{mode}}

Note that you can also hover over the directive's area or tab through each button to open and activate the speed dial menu.

Button sizes

Buttons can have different widths by including different classes in the button.

These classes are btn-width-xs, btn-width-small, btn-width-medium or btn-width-large

You can combine this with the following classes to increase also in height

Extra small Small Middle Large
Xs Small Middle Large
Xs Small Middle Large
Xs Small Middle Large
Xs Small Middle Large

Button Sizes (height)

Buttons can have different heights by including different classes in the button.

These classes are btn-sm, btn-xs, btn-lg or no class for the default height.

You can combine this with the previous classes to increase also in width

Large Default Small Extra small
Large button Default Small Extra small
Large button Default Small Extra small
Large button Default Small Extra small
Large button Default Small Extra small

Button with direction

You can make buttons with different directions by adding the btn-direction class and the respective direction

Possible directions are btn-up, btn-down, btn-left, btn-right

Up

Up

Up

Up

Up

Up

Left Middle Right

Left Middle Right

Left Middle Right

Left Middle Right

Left Middle Right

Left Middle Right

Down

Down

Down

Down

Down

Down

Block buttons

Block buttons go from one side of the container right to the end.

To create a block button insert the btn-block inside a button. You can also combine with previous classes to increase height, width or give direction to the button.

Default Primary Accent Info Success Warning Danger