Button     

<!-- Just label -->
<q-btn label="New item" />

<!-- Just icon -->
<q-btn icon="map" />

<!-- Icon & Label -->
<q-btn icon="create" label="New item" />

<!--
  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). The label is discarded.
-->
<q-btn round color="secondary" icon="card_giftcard" />

<!--
  Next is perfectly equivalent, but use "icon"
  property whenever you can.
-->
<q-btn round color="secondary">
  <q-icon name="card_giftcard" />
</q-btn>

<q-btn
  color="primary"
  size="sm"
  label="Edit"
/>

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

<template>
  <!-- Round shaped (only use icon or spinner as content!) with loading state -->
  <q-btn
    :loading="loading"
    round
    icon="map"
    color="primary"
    @click="handler"
  >
    <q-spinner-oval slot="loading" />
  </q-btn>
</template>

<script>
export default {
  data () {
    return {
      loading: false
    }
  },
  methods: {
    handler () {
      this.loading = true
      // we simulate a delay here:
      setTimeout(() => {
        this.loading = false
      }, 3000)
    }
  }
}
</script>

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

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

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

<q-btn color="primary" size="xs" label="Extra Small Button" />

<q-btn color="primary" size="sm" label="Small Button" />

<q-btn color="primary" size="md" label="Medium Button" />

<q-btn color="primary" size="lg" label="Large Button" />

<q-btn color="primary" size="xl" label="Extra Large Button" />

<q-btn color="primary" size="25px" label="25 Pixels" />

<q-btn color="primary" size="2rem" label="2 Rem" />

<q-btn color="primary" size="3vh" label="3 View Height" />

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

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

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

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

<!-- a flat dense round button -->
<q-btn flat dense round icon="menu" color="primary" />

<template>
  <!-- Notice `loading` prop -->
  <q-btn :loading="loading" @click="simulateProgress" label="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 {
  data () {
    return { loading: false }
  },
  methods: {
    simulateProgress () {
      // we set loading state
      this.loading = true

      // simulate a delay, like in
      // waiting for an Ajax call
      setTimeout(() => {
        // delay is over, now we reset loading state
        this.loading = false
        // DON't forget to reset loading state
        // otherwise the button will keep on
        // being in "loading" state
      }, 3000)
    }
  }
}
</script>

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

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

<script>
// remember to also register necessary components in quasar.conf.js
export default {
  data () {
    return {
      loading: false
      percentage: 0
    }
  },
  methods: {
    startComputing () {
      this.loading = true
      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 reset loading state:
          this.loading = false
        }
      }, 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" />

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

<script>
export default {
  data () {
    return {
      test: '',
      submitting: false
    }
  },
  methods: {
    simulateSubmit () {
      this.submitting = true

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

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

<form>
  ...
  <q-btn label="I do not submit form" />
  <q-btn type="submit" label="I do submit the form" />
  ...
</form>

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

<q-btn
  wait-for-ripple
  @click="clickHandler"
  label="Click Me"
/>

<template>
  <!-- Click and hold to trigger every second -->
  <q-btn @click="clickHandler" :repeat-timeout="1000" label="Click Me" />

  <!-- Click and hold to trigger faster over time -->
  <q-btn @click="clickHandler" :repeat-timeout="repeatFunction" label="Click Me" />
</template>
<script>
  export default {
    methods: {
      clickHandler () {
        console.log('Handler Triggered')
      },
      repeatFunction (timesTriggered) {
        // first time timesTriggered is 0, so we add 1
        // to be sure we don't divide by 0
        return 1000 / (timesTriggered + 1)
      }
    }
  }
</script>