LoadingButton Component

A reusable button component with built-in loading state indicator (spinner).
Perfect for form submissions, API requests, or any async action where you want to block multiple clicks.

---

Usage

<template>
  <div>
    <LoadingButton classes="btn btn-primary" :isLoading="loading" type="submit">
      Submit
    </LoadingButton>

    <button @click="toggleLoading">Toggle Loading</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
    }
  },
  methods: {
    toggleLoading() {
      this.loading = !this.loading
    },
  },
}
</script>

Props

Prop	Type	Default	Description
classes	String	—	Custom CSS classes to style the button
isLoading	Boolean	false	If true, shows a spinner and disables the button
disabled	Boolean	false	Disables the button manually
type	String	"button"	Button type (button, submit, reset)
title	String

Features

• Built-in loading spinner
• Auto-disables button when loading
• Accepts custom CSS classes
• Works with type="submit" for forms
• Prevents multiple clicks during async actions

Example: API Submit Button

<template>
  <form @submit.prevent="submitForm">
    <LoadingButton classes="btn btn-success" :isLoading="loading" type="submit">
      Save Changes
    </LoadingButton>
  </form>
</template>

<script>
export default {
  data() {
    return { loading: false }
  },
  methods: {
    async submitForm() {
      this.loading = true
      await new Promise((resolve) => setTimeout(resolve, 2000)) // simulate API
      this.loading = false
      alert('Form submitted!')
    },
  },
}
</script>