Buttons communicate the action that will occur when the user touches them.
The following classes can be applied to change the color palette:
md-primarymd-accentmd-warn
Default
Primary
Accent
Warn
Disabled
Dense
<md-button>Default</md-button>
<md-button class="md-primary">Primary</md-button>
<md-button class="md-accent">Accent</md-button>
<md-button class="md-warn">Warn</md-button>
<md-button class="md-primary" disabled>Disabled</md-button>
<md-button class="md-dense">Dense</md-button>
Default
Primary
Accent
Warn
Disabled
Dense
<md-button class="md-raised">Default</md-button>
<md-button class="md-raised md-primary">Primary</md-button>
<md-button class="md-raised md-accent">Accent</md-button>
<md-button class="md-raised md-warn">Warn</md-button>
<md-button class="md-raised md-primary" disabled>Disabled</md-button>
<md-button class="md-raised md-dense">Dense</md-button>
Button
Link
Router Link
<md-button class="md-raised md-primary">Button</md-button>
<md-button href="#/components/button" class="md-raised md-primary">Link</md-button>
<router-link tag="md-button" to="/components/button" class="md-raised md-primary">Router Link</router-link>
more_vert
more_vert
more_vert
more_vert
more_vert
more_vert
<md-button class="md-icon-button">
<md-icon>more_vert</md-icon>
</md-button>
<md-button class="md-icon-button md-primary">
<md-icon>more_vert</md-icon>
</md-button>
<md-button class="md-icon-button md-accent">
<md-icon>more_vert</md-icon>
</md-button>
<md-button class="md-icon-button md-warn">
<md-icon>more_vert</md-icon>
</md-button>
<md-button class="md-icon-button" disabled>
<md-icon>more_vert</md-icon>
</md-button>
<md-button class="md-icon-button md-dense">
<md-icon>more_vert</md-icon>
</md-button>
add
add
add
add
add
add
<md-button class="md-icon-button md-raised">
<md-icon>add</md-icon>
</md-button>
<md-button class="md-icon-button md-raised md-primary">
<md-icon>add</md-icon>
</md-button>
<md-button class="md-icon-button md-raised md-accent">
<md-icon>add</md-icon>
</md-button>
<md-button class="md-icon-button md-raised md-warn">
<md-icon>add</md-icon>
</md-button>
<md-button class="md-icon-button md-raised" disabled>
<md-icon>add</md-icon>
</md-button>
<md-button class="md-icon-button md-raised md-dense">
<md-icon>add</md-icon>
</md-button>
edit
email
save
dialpad
message
edit
email
save
dialpad
message
save
dialpad
add
<div>
<md-button class="md-fab">
<md-icon>edit</md-icon>
</md-button>
<md-button class="md-fab md-primary">
<md-icon>email</md-icon>
</md-button>
<md-button class="md-fab md-warn">
<md-icon>save</md-icon>
</md-button>
<md-button class="md-fab md-clean">
<md-icon>dialpad</md-icon>
</md-button>
<md-button class="md-fab" disabled>
<md-icon>message</md-icon>
</md-button>
</div>
<div>
<md-button class="md-fab md-mini">
<md-icon>edit</md-icon>
</md-button>
<md-button class="md-fab md-primary md-mini">
<md-icon>email</md-icon>
</md-button>
<md-button class="md-fab md-warn md-mini">
<md-icon>save</md-icon>
</md-button>
<md-button class="md-fab md-clean md-mini">
<md-icon>dialpad</md-icon>
</md-button>
<md-button class="md-fab md-mini" disabled>
<md-icon>message</md-icon>
</md-button>
</div>
<md-button class="md-fab md-fab-bottom-left">
<md-icon>save</md-icon>
</md-button>
<md-button class="md-fab md-primary md-fab-bottom-center">
<md-icon>dialpad</md-icon>
</md-button>
<md-button class="md-fab md-fab-bottom-right">
<md-icon>add</md-icon>
</md-button>
Indigo
Teal
add
message
dialpad
<md-button class="md-primary" v-md-theme="'indigo'">Indigo</md-button>
<md-button class="md-raised md-primary" v-md-theme="'teal'">Teal</md-button>
<md-button class="md-icon-button md-primary" v-md-theme="'orange'">
<md-icon>add</md-icon>
</md-button>
<md-button class="md-icon-button md-raised md-primary" v-md-theme="'green'">
<md-icon>message</md-icon>
</md-button>
<md-button class="md-fab md-primary" v-md-theme="'brown'">
<md-icon>dialpad</md-icon>
</md-button>