diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 3a8a9c92e..9661daded 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index d3fac3972..d64bbb0e4 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 825648ae9..7b7580b55 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index c80341a68..e6770033c 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 73ef73fbf..2212b3834 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1710,6 +1710,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 0d987ff6a..333180fcc 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -1710,6 +1710,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 6b6b705f6..79a4b1a8d 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1710,6 +1710,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 0234ce614..bc3e01bf1 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -1710,6 +1710,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 7cc9b654f..137be7e8c 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 648a5e9e0..1d7f4e70f 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1710,6 +1710,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 51974d7ae..16ff5b140 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1710,6 +1710,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 29d602d62..fc29b04af 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1710,6 +1710,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index f709449dd..7ec7a9589 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1710,6 +1710,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 1f864bab0..f7e99e243 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -1722,6 +1722,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 1aa2db9ba..3705169b9 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -1722,6 +1722,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 0eb20b136..11068c686 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -1722,6 +1722,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 2592ebd78..8686baa81 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1722,6 +1722,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index f3b57347e..7ade9ab7b 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -1722,6 +1722,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index ac7583ed9..43ece1812 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -1722,6 +1722,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index d98a2a19d..82ad8f355 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -1722,6 +1722,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 288bee12a..56048e927 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1722,6 +1722,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index d70130e6c..848516cc1 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index ca13cf72b..396f1bfd2 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1710,6 +1710,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 1acf40ee4..01ad11162 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1710,6 +1710,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 62015b8d6..e4815a87d 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1710,6 +1710,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index ba97910ed..58c563358 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index b16214912..59860100e 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index d16c27612..087a8398c 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 7a9609128..6cc26db63 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 39711af95..6c9c0497c 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index b458771a1..77dbf615e 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 0d95da7a5..1ae8d15e9 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index d6bc1fd11..8adcb4252 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index c42d16f31..c43a62552 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1698,6 +1698,12 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
+.p-button.p-button-loading .p-button-label {
+  margin-left: 0.5rem;
+}
+.p-button.p-button-loading .p-button-icon {
+  margin-right: 0;
+}
 
 .p-fluid .p-button {
   width: 100%;
diff --git a/src/components/button/Button.css b/src/components/button/Button.css
index f937b65f9..8660ca94a 100755
--- a/src/components/button/Button.css
+++ b/src/components/button/Button.css
@@ -65,4 +65,8 @@
 .p-buttonset .p-button:focus {
     position: relative;
     z-index: 1;
+}
+
+.p-button-label {
+    transition: all .2s;
 }
\ No newline at end of file
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index b649b9eea..eacd34639 100755
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -52,7 +52,7 @@ export default {
         },
         iconClass() {
             return [
-                this.loading ? this.loadingIcon : this.icon,
+                this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
                 'p-button-icon',
                 {
                     'p-button-icon-left': this.iconPos === 'left' && this.label,
@@ -65,7 +65,7 @@ export default {
         badgeStyleClass() {
             return [
                 'p-badge p-component', this.badgeClass, {
-                    'p-badge-no-gutter': this.badge && String(this.badge).length === 1
+                'p-badge-no-gutter': this.badge && String(this.badge).length === 1
             }]
         },
         disabled() {