Button     

<q-btn icon="create">New item</q-btn>

<q-btn>
  <q-icon name="map" />
</q-btn>

<!--
  Notice "round" specified and
  self-closing tag (as we don't need to specify any
  content for button -- the icon fills all available
  space anyway).
-->
<q-btn round color="secondary" icon="card_giftcard" />

<!-- Next is perfectly equivalent -->
<q-btn round color="secondary">
  <q-icon name="card_giftcard" />
</q-btn>

<q-btn icon="edit" color="primary" small>
  Edit
</q-btn>

<!-- Regular shaped -->
<q-btn loader color="primary" @click="clickMethod">
  Button Label
</q-btn>

<!-- Round shaped; only use icon as content -->
<q-btn v-model="submit" loader round color="primary" @click="clickMethod">
  <q-spinner-oval slot="loading" />
</q-btn>

<!-- icon will be placed on the left -->
<q-btn icon="mail" color="primary">
  Button Label
</q-btn>

<!-- icon will be placed on the right -->
<q-btn icon-right="mail" color="teal">
  Button Label
</q-btn>

<q-btn color="primary" small>
  Small Button
</q-btn>

<q-btn color="primary" big>
  Big Button
</q-btn>

<q-btn color="primary">Primary Button</q-btn>
<q-btn color="amber">Amber Button</q-btn>

<!-- an outlined button -->
<q-btn outline color="teal">Outlined Button</q-btn>

<!-- a rounded push button -->
<q-btn rounded push color="secondary">Rounded Push Button</q-btn>

<!-- a glossy button -->
<q-btn glossy color="primary">Glossy</q-btn>

<template>
  <!-- Notice `loader` prop -->
  <q-btn loader @click="simulateProgress">
    Button Label
    <!--
      Notice slot="loading". This is optional.
      If missing, the default theme spinner will be used.
    -->
    <span slot="loading">Loading...</span>
  </q-btn>
</template>

<script>
export default {
  methods: {
    // notice parameter "done" (Function)
    simulateProgress (event, done) {
      // simulate a delay, like in
      // waiting for an Ajax call
      setTimeout(() => {
        // delay is over, now we call
        // done() function to inform button
        // it must go to its initial state
        done()
        // DON't forget to call done() otherwise
        // the button will keep on being in
        // "loading" state
      }, 3000)
    }
  }
}
</script>

<q-btn icon="mail" color="orange" @click="simulateProgress">
  Get Mail
  <q-spinner-facebook slot="loading" size="20px" />
</q-btn>

<template>
  <q-btn
    :percentage="percentage"
    loader
    color="primary"
    @click="startComputing"
  >
    Compute PI
    <span slot="loading">
      <q-spinner-gears class="on-left" />
      Computing...
    </span>
  </q-btn>
</template>

<script>
// remember to also import necessary
// Quasar components (not added here)
export default {
  data () {
    return {
      percentage: 0
    }
  },
  methods: {
    startComputing (e, done) {
      this.percentage = 0

      // we simulate progress here
      this.interval = setInterval(() => {
        // adding a random amount of percentage
        this.percentage += Math.floor(Math.random() * 8 + 10)

        // and when we are done...
        if (this.percentage >= 100) {
          clearInterval(this.interval)
          // DON'T forget to call "done()" (the second param of handler)
          done()
        }
      }, 700)
    }
  },
  beforeDestroy () {
    // we also take care of clearing interval
    // should the user navigate away before the progress has ended
    clearInterval(this.interval)
  }
}
</script>

<template>
  <div>
    <!-- a simple text field watching for the enter key release -->
    <q-input v-model="test" @keyup.enter="simulateSubmit"></q-input>

    <!--
      A button with v-model set to submit.
      v-model scope variable must be a strict Boolean
    -->
    <q-btn v-model="submit" loader @click="simulateSubmit">
      Save
      <q-spinner-facebook slot="loading"></q-spinner-facebook>
    </q-btn>
  </div>
</template>

<script>
export default {
  data () {
    return {
      test: '',
      submit: false
    }
  },
  methods: {
    simulateSubmit () {
      // if clicking/tapping on the button,
      // due to using `v-model`, "submit" will already
      // be `true`, but we also want to handle QInput triggering
      // this method, so we need to manually set `submit` to `true`
      // in this case.
      this.submit = true

      // Simulating a delay here.
      // When we are done, we reset "submit"
      // Boolean to false to restore the
      // initial state.
      setTimeout(() => {
        // delay simulated, we are done,
        // now restoring submit to its initial state
        this.submit = false
      }, 3000)
    }
  }
}
</script>

<q-btn color="primary" disabled>Primary Button</q-btn>
<q-btn color="amber" :disabled="booleanVar">Amber Button</q-btn>

<q-btn @click="$router.push('/path/to/new/page')" color="primary" />