@mcwv/button

Usage

<mdc-button @click="onClick" :disabled="buttonDisabled">click me</mdc-button>

var vm = new Vue({
  data:{
    buttonDisabled: false
  },
  methods: {
    onClick () {...}
  }
})

events

event	args	Description
@click		emitted on click

props

prop	Type	Default	Description
disabled	String		disable the button
raised	Boolean		a contained button that is elevated upon the surface
unelevated	Boolean		a contained button that is flush with the surface
outlined	Boolean		a contained button that is flush with the surface and has a visible border(*)
dense	String		compresses the button text to make it slightly smaller
event	String	optional	optional event to emit on click
event-target	Object	vm.$root	optional event target, defaults to root bus
event-args	Array	[]	optional event args
href	String		link's href, renders anchor (see notes below)
to	String, Object	undefined	router-link property (*)
replace	Boolean	false	router-link property (*)
append	Boolean	false	router-link property (*)
exact	Boolean	false	router-link property (*)
active-class	String	router-link-active	router-link property (*)
exact-active-class	String	router-link-exact-active	router-link property (*)

(*) Requires vue-router

text buttons

<mdc-button>Baseline</mdc-button>
<mdc-button dense>Dense</mdc-button>

Raised Button

<mdc-button raised>Baseline</mdc-button>
<mdc-button raised dense>Dense</mdc-button>

Unelevated buttons

<mdc-button unelevated>Baseline</mdc-button>
<mdc-button unelevated dense>Dense</mdc-button>

Icon buttons

<mdc-button ><i class="material-icons mdc-button__icon">favorite</i>like</mdc-button>

or an SVG button

<mdc-button >  <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="...">
  ...
  </svg>
  like
</mdc-button>

Note: mdc-icon is not suitable for rendering in an mdc-button as it does not set the required mdc-button__icon class.

Link buttons

simple Link

Using the href attribute will render <a role="button" href="...">

<mdc-button href="#">Home</mdc-button>

router-link

If the to property is defined, the item behaves as a router-link

<mdc-button to="/home">Home</mdc-button>

Accessibility Warning:

Buttons are expected to be triggered using the Space or Enter key, while links are expected to be triggered using the Enter key. Additionally, button and links have different behaviors on right click. see this MDN note

You might want to keep button behaviour and do the navigation programatically:

<mdc-button @click="location.href='#'">Home</mdc-button>
<mdc-button @click="$router.push(...)">Home</mdc-button>

Triggering events

 <mdc-button event='my-event'>Do Something</mdc-button>

// register event from some component context
this.$root.$on('my-event', () => doSomething())

Reference

• https://material.io/guidelines/components/buttons.html