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.
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.
The following options can be applied to all buttons, even FAB ones:
| Name | Description | Default |
|---|---|---|
| href String | Creates a anchor on the button. In this case the generated tag will be <a>. | 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 |
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.
The following class will turn a button into a icon button:
| Name | Description |
|---|---|
| md-icon-button | Enables the rounded-shape icon button |
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>.
md-icon-button.The following classes can be used to turn a button into a FAB:
| Name | Description |
|---|---|
| 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 |
All buttons by default will output a button tag. If you want to change it to a a tag, just pass it a href:
md-button also supports Vue Router by default. All options of router-link could be simply used here.