Fixed #1160 - [Feature-Request] Add "loading" prop to Buttons

src/components/button/Button.d.ts

@@ -4,6 +4,8 @@ interface ButtonProps {
     iconPos?: string;
     badge?: string;
     badgeClass?: string;
+    loading?: boolean;
+    loadingIcon?: string;
 }
 
 declare class Button {

src/components/button/Button.vue

@@ -1,6 +1,7 @@
 <template>
     <button :class="buttonClass" type="button" v-ripple>
         <slot>
+            <span v-if="loading && !icon" :class="iconClass"></span>
             <span v-if="icon" :class="iconClass"></span>
             <span class="p-button-label">{{label||'&nbsp;'}}</span>
             <span v-if="badge" :class="badgeStyleClass">{{badge}}</span>
@@ -29,6 +30,14 @@ export default {
         badgeClass: {
             type: String,
             default: null
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        loadingIcon: {
+            type: String,
+            default: 'pi pi-spinner pi-spin'
         }
     },
     computed: {
@@ -42,7 +51,7 @@ export default {
         },
         iconClass() {
             return [
-                this.icon,
+                this.loading ? this.loadingIcon : this.icon,
                 'p-button-icon',
                 {
                     'p-button-icon-left': this.iconPos === 'left' && this.label,

src/views/button/ButtonDemo.vue

@@ -108,6 +108,12 @@
                 <Button type="button" label="Emails" badge="8" />
                 <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
+                <h5>Loading</h5>
+                <Button type="button" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
+                <Button type="button" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)"  />
+                <Button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
+                <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
+
                 <h5>Templating</h5>
                 <Button type="button" class="p-px-3">
                     <img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
@@ -141,6 +147,17 @@
 import ButtonDoc from './ButtonDoc'
 
 export default {
+    data() {
+        return {
+            loading: [false, false, false]
+        }
+    },
+    methods: {
+        load(index) {
+            this.loading[index] = true;
+            setTimeout(() => this.loading.value[index] = false, 10000);
+        }
+    },
 	components: {
 		'ButtonDoc': ButtonDoc
     }

src/views/button/ButtonDoc.vue

@@ -117,6 +117,13 @@ import Button from 'primevue/button';
 <Button label="Normal" icon="pi pi-check" class="p-button"  />
 <Button label="Large" icon="pi pi-check" class="p-button-lg" />
 
+</code></pre>
+
+        <h5>Loading State</h5>
+        <p>Button displays a <i>loadingIcon</i> when <i>loading</i> property is enabled.</p>
+<pre v-code><code>
+&lt;Button label="Save" icon="pi pi-check" :loading="isLoading" /&gt;
+
 </code></pre>
 
         <h5>Templating</h5>
@@ -175,6 +182,18 @@ import Button from 'primevue/button';
                         <td>string</td>
                         <td>null</td>
                         <td>Style class of the badge.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the button is in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spinner pi-spin</td>
+                        <td>Icon to display in loading state.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -328,8 +347,14 @@ export default {
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
+        <h5>Loading</h5>
+        <Button type="button" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
+        <Button type="button" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)"  />
+        <Button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
+        <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
+
         <h5>Templating</h5>
-       <Button type="button" class="p-px-3">
+        <Button type="button" class="p-px-3">
             <img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
         </Button>
         <Button type="button" class="p-button-outlined p-button-success">
@@ -355,6 +380,17 @@ export default {
 
 <script>
 export default {
+    data() {
+        return {
+            loading: [false, false, false]
+        }
+    },
+    methods: {
+        load(index) {
+            this.loading[index] = true;
+            setTimeout(() => this.loading[index] = false, 10000);
+        }
+    }
 }
 <\\/script>
 
@@ -501,6 +537,12 @@ export default {
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
+        <h5>Loading</h5>
+        <Button type="button" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
+        <Button type="button" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)"  />
+        <Button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
+        <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
+
         <h5>Templating</h5>
         <Button type="button" class="p-px-3">
             <img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
@@ -527,9 +569,19 @@ export default {
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { ref } from 'vue';
 
-export default defineComponent({});
+export default({
+    setup() {
+        const loading = ref([false, false, false]);
+        const load = (index) => {
+            loading.value[index] = true;
+            setTimeout(() => loading.value[index] = false, 1000);
+        }
+
+        return {loading, load};
+    }
+});
 <\\/script>
 
 <style lang="scss" scoped>