Vue Material -

Button

Buttons communicate the action that will occur when the user touches them. They can be Flat, Raised or Floating. Flat and raised buttons accepts only text (by default) but with an special class the button can place an icon. Floating Buttons only accept icons. They can also be smaller than usual with a Dense class.

Flat and Raised

The flat button is the default one. No classes or properties needs to be attached to it to make it flat. The raised button can be achieved with the md-raised class.

Regular Button

API - md-button

The following options can be applied to all buttons, even FAB ones:

NameDescriptionDefault
href String Creates a anchor on the button. In this case the generated tag will be . null
type String Applies a type to button - It doesn't affects links. button
disabled Boolean Disables the button and prevents its actions. false
md-ripple Boolean Enables/Disables the ripple effect. true

Icons

To display icons inside buttons you only need to add a class and you're good to go. And you can also combine it with the raised class.

Buttons with Icons

API

The following class will turn a button into a icon button:

NameDescription
md-icon-button Enables the rounded-shape icon button

Floating Action Buttons

A Floating Action Button represents the primary action in an application and is used for a promoted action. FAB buttons can be regular sized or mini, with an accent color by default. This type of buttons can only have icons, so it should be used along with <md-icon>.

Use only one FAB per page and only if the purpose of the button is to fire the main action of the screen. Otherwise use md-icon-button.
FAB

API

The following classes can be used to turn a button into a FAB:

NameDescription
md-fab Turns a button into a FAB
md-plain Makes the button white
md-mini Creates a smaller FAB
md-dense An alias for "md-mini"
md-fab-top-right Positions the FAB on the top right of the nearest relative parent
md-fab-top-center Positions the FAB on the top center of the nearest relative parent
md-fab-top-left Positions the FAB on the top left of the nearest relative parent
md-fab-bottom-right Positions the FAB on the bottom right of the nearest relative parent
md-fab-bottom-center Positions the FAB on the bottom center of the nearest relative parent
md-fab-bottom-left Positions the FAB on the bottom left of the nearest relative parent
md-fixed Apply position: fixed to FAB. Better used with the 4 position coordinates above

Link Vs Buttons

All buttons by default will output a button tag. If you want to change it to a a tag, just pass it a href:

Links and Buttons

Vue Router

md-button also supports Vue Router by default. All options of router-link could be simply used here.

router-link