From b12962b0ca966afa85790bac30dce88e85876a84 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Fri, 16 Apr 2021 15:14:40 +0300
Subject: [PATCH] Refactor #1876

---
 public/themes/arya-blue/theme.css             | 10 +++
 public/themes/arya-green/theme.css            | 10 +++
 public/themes/arya-orange/theme.css           | 10 +++
 public/themes/arya-purple/theme.css           | 10 +++
 public/themes/bootstrap4-dark-blue/theme.css  | 10 +++
 .../themes/bootstrap4-dark-purple/theme.css   | 10 +++
 public/themes/bootstrap4-light-blue/theme.css | 10 +++
 .../themes/bootstrap4-light-purple/theme.css  | 10 +++
 public/themes/fluent-light/theme.css          | 10 +++
 public/themes/luna-amber/theme.css            | 10 +++
 public/themes/luna-blue/theme.css             | 10 +++
 public/themes/luna-green/theme.css            | 10 +++
 public/themes/luna-pink/theme.css             | 10 +++
 public/themes/md-dark-deeppurple/theme.css    | 10 +++
 public/themes/md-dark-indigo/theme.css        | 10 +++
 public/themes/md-light-deeppurple/theme.css   | 10 +++
 public/themes/md-light-indigo/theme.css       | 10 +++
 public/themes/mdc-dark-deeppurple/theme.css   | 10 +++
 public/themes/mdc-dark-indigo/theme.css       | 10 +++
 public/themes/mdc-light-deeppurple/theme.css  | 10 +++
 public/themes/mdc-light-indigo/theme.css      | 10 +++
 public/themes/nova-accent/theme.css           | 10 +++
 public/themes/nova-alt/theme.css              | 10 +++
 public/themes/nova/theme.css                  | 10 +++
 public/themes/rhea/theme.css                  | 10 +++
 public/themes/saga-blue/theme.css             | 10 +++
 public/themes/saga-green/theme.css            | 10 +++
 public/themes/saga-orange/theme.css           | 10 +++
 public/themes/saga-purple/theme.css           | 10 +++
 public/themes/vela-blue/theme.css             | 10 +++
 public/themes/vela-green/theme.css            | 10 +++
 public/themes/vela-orange/theme.css           | 10 +++
 public/themes/vela-purple/theme.css           | 10 +++
 src/components/button/Button.css              |  4 +
 src/components/button/Button.d.ts             |  8 +-
 src/components/button/Button.js               | 72 +++++-----------
 src/showcase/button/ButtonDemo.js             | 25 ++++--
 src/showcase/button/ButtonDoc.js              | 85 ++++++++++++-------
 38 files changed, 428 insertions(+), 96 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 94a2c6528d..d7f7c4feb2 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index d8fffaa81a..315a3cca28 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index f0a24a810d..ecd8bc1847 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 806f9ffa9e..f783ec7041 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 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 727cf2e5e2..a671e67219 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1437,6 +1437,16 @@
     padding: 0.625rem 0.9375rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 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 8e1d0cfce0..816a341833 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -1437,6 +1437,16 @@
     padding: 0.625rem 0.9375rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 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 cb4a26ea4d..082520363e 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1437,6 +1437,16 @@
     padding: 0.625rem 0.9375rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 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 e583745a8a..ed3b649de0 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -1437,6 +1437,16 @@
     padding: 0.625rem 0.9375rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 8b1146a0ed..f48449c150 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 6e9ba44e8a..6bf88f4a6d 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1437,6 +1437,16 @@
     padding: 0.53625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 254a20af26..25ffaf69c9 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1437,6 +1437,16 @@
     padding: 0.53625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 34d932c44d..f0dd164624 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1437,6 +1437,16 @@
     padding: 0.53625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index d74370d66e..931608fb32 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1437,6 +1437,16 @@
     padding: 0.53625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 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 37d2529cee..fcc0b67df9 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -1449,6 +1449,16 @@
     padding: 0.8925rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 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 129e06bdbd..41b75e3113 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -1449,6 +1449,16 @@
     padding: 0.8925rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 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 56d43be183..e6ba997a9f 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -1449,6 +1449,16 @@
     padding: 0.8925rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 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 f28afa2366..d75dc87ba1 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1449,6 +1449,16 @@
     padding: 0.8925rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 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 e7a1c27b6f..9e1ca0b7ad 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -1449,6 +1449,16 @@
     padding: 0.71375rem 0.9375rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 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 7fe737503b..958fcf312b 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -1449,6 +1449,16 @@
     padding: 0.71375rem 0.9375rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 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 4f15a3eb7f..d159c8fbc5 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -1449,6 +1449,16 @@
     padding: 0.71375rem 0.9375rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 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 a06b066b1f..f7af44a06d 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1449,6 +1449,16 @@
     padding: 0.71375rem 0.9375rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 4010345323..d9f0ef755d 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.53625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 6e2bdcae7d..13c671dbd3 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1437,6 +1437,16 @@
     padding: 0.53625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 1255763253..88685870b7 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1437,6 +1437,16 @@
     padding: 0.53625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 0f46119dd5..b987720fff 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.53625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index fb12a4f9ee..0f04467a53 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index c60ebc8eb2..9c65197277 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 39e6873256..552f90a7be 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index e98c702fc4..9a0f83f46c 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 8a9ff815e3..788958ae50 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 320ad91ad6..30f2998c41 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 2643a796f2..2a7a636832 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 08944b361d..a05024761c 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1428,6 +1428,16 @@
     padding: 0.625rem 1.25rem; }
     .p-button.p-button-lg .p-button-icon {
       font-size: 1.25rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem; }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem; }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0; }
 
 .p-fluid .p-button {
   width: 100%; }
diff --git a/src/components/button/Button.css b/src/components/button/Button.css
index de6c3a1f4e..53966e8f7f 100644
--- a/src/components/button/Button.css
+++ b/src/components/button/Button.css
@@ -66,3 +66,7 @@
     position: relative;
     z-index: 1;
 }
+
+.p-button-label {
+    transition: all .2s;
+}
diff --git a/src/components/button/Button.d.ts b/src/components/button/Button.d.ts
index cba88aa6cf..521936d66e 100644
--- a/src/components/button/Button.d.ts
+++ b/src/components/button/Button.d.ts
@@ -13,12 +13,6 @@ declare namespace Button {
         props: ButtonProps;
     }
 
-    interface LoadingOptions {
-        icon: IconType;
-        position: PositionType;
-        disabled: boolean;
-    }
-
     interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'disabled'> {
         label?: string;
         icon?: IconType;
@@ -29,7 +23,7 @@ declare namespace Button {
         tooltipOptions?: TooltipOptions;
         disabled?: boolean;
         loading?: boolean;
-        loadingOptions?: LoadingOptions;
+        loadingIcon?: IconType;
     }
 }
 
diff --git a/src/components/button/Button.js b/src/components/button/Button.js
index cdfd07b4ea..461d7f86fa 100644
--- a/src/components/button/Button.js
+++ b/src/components/button/Button.js
@@ -18,7 +18,7 @@ export class ButtonComponent extends Component {
         forwardRef: null,
         disabled: false,
         loading: false,
-        loadingOptions: null
+        loadingIcon: 'pi pi-spinner pi-spin'
     }
 
     static propTypes = {
@@ -32,7 +32,7 @@ export class ButtonComponent extends Component {
         forwardRef: PropTypes.any,
         disabled: PropTypes.bool,
         loading: PropTypes.bool,
-        loadingOptions: PropTypes.any
+        loadingIcon: PropTypes.any
     };
 
     getElementRef(el) {
@@ -50,6 +50,10 @@ export class ButtonComponent extends Component {
         return this.element;
     }
 
+    isDisabled() {
+        return this.props.disabled || this.props.loading;
+    }
+
     componentDidMount() {
         if (this.props.tooltip) {
             this.renderTooltip();
@@ -72,40 +76,6 @@ export class ButtonComponent extends Component {
         }
     }
 
-    getOptions(loadingOptions) {
-        let disabled = this.isDisabled(loadingOptions);
-        let vertical = this.isVertical(loadingOptions);
-        let iconOnly = this.isIconOnly(loadingOptions);
-
-        return { disabled, vertical, iconOnly };
-    }
-
-    getLoadingOptions() {
-        if (this.props.loading) {
-            let defaultOptions = { icon: 'pi pi-spin pi-spinner', position: 'left', disabled: true };
-            let options = { ...defaultOptions, ...(this.props.loadingOptions || {}) };
-
-            return options;
-        }
-
-        return null;
-    }
-
-    isDisabled(loadingOptions) {
-        return this.props.disabled || (loadingOptions && loadingOptions.disabled);
-    }
-
-    isIconOnly(loadingOptions) {
-        return !this.props.label && (this.props.icon || (loadingOptions && loadingOptions.icon))
-    }
-
-    isVertical(loadingOptions) {
-        return this.props.label && (
-            (this.props.iconPos === 'top' || this.props.iconPos === 'bottom') ||
-            (loadingOptions && (loadingOptions.position === 'top' || loadingOptions.position === 'bottom'))
-        );
-    }
-
     renderTooltip() {
         this.tooltip = tip({
             target: this.element,
@@ -114,17 +84,19 @@ export class ButtonComponent extends Component {
         });
     }
 
-    renderIcon(icon, position) {
+    renderIcon() {
+        let icon = this.props.loading ? this.props.loadingIcon : this.props.icon;
         let content = null;
 
         if (icon) {
             let iconType = typeof icon;
-            let className = classNames('p-c', {
+            let className = classNames('p-button-icon p-c', {
+                'p-button-loading-icon': this.props.loading,
                 [`${icon}`]: iconType === 'string',
-                'p-button-icon-left': position === 'left' && this.props.label,
-                'p-button-icon-right': position === 'right' && this.props.label,
-                'p-button-icon-top': position === 'top' && this.props.label,
-                'p-button-icon-bottom': position === 'bottom' && this.props.label
+                'p-button-icon-left': this.props.iconPos === 'left' && this.props.label,
+                'p-button-icon-right': this.props.iconPos === 'right' && this.props.label,
+                'p-button-icon-top': this.props.iconPos === 'top' && this.props.label,
+                'p-button-icon-bottom': this.props.iconPos === 'bottom' && this.props.label,
             });
             content = <span className={className}></span>;
 
@@ -161,15 +133,16 @@ export class ButtonComponent extends Component {
     }
 
     render() {
-        let loadingOptions = this.getLoadingOptions();
-        let { disabled, vertical, iconOnly } = this.getOptions(loadingOptions);
+        let disabled = this.isDisabled();
         let className = classNames('p-button p-component', this.props.className, {
-            'p-button-icon-only': iconOnly,
-            'p-button-vertical': vertical,
-            'p-disabled': disabled
+            'p-button-icon-only': (this.props.icon || (this.props.loading && this.props.loadingIcon)) && !this.props.label,
+            'p-button-vertical': (this.props.iconPos === 'top' || this.props.iconPos === 'bottom') && this.props.label,
+            'p-disabled': disabled,
+            'p-button-loading': this.props.loading,
+            'p-button-loading-label-only': this.props.loading && !this.props.icon && this.props.label,
+            [`p-button-loading-${this.props.iconPos}`]: this.props.loading && this.props.loadingIcon && this.props.label
         });
-        let loading = this.props.loading && this.renderIcon(loadingOptions.icon, loadingOptions.position);
-        let icon = this.renderIcon(this.props.icon, this.props.iconPos);
+        let icon = this.renderIcon();
         let label = this.renderLabel();
         let badge = this.renderBadge();
 
@@ -177,7 +150,6 @@ export class ButtonComponent extends Component {
 
         return (
             <button ref={(el) => this.getElementRef(el)} {...buttonProps} className={className} disabled={disabled}>
-                {loading}
                 {icon}
                 {label}
                 {this.props.children}
diff --git a/src/showcase/button/ButtonDemo.js b/src/showcase/button/ButtonDemo.js
index 3fdaa39a1f..0bb96f46ee 100644
--- a/src/showcase/button/ButtonDemo.js
+++ b/src/showcase/button/ButtonDemo.js
@@ -10,17 +10,25 @@ export class ButtonDemo extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            loading: false,
-            done: false
+            loading1: false,
+            loading2: false
         }
 
-        this.onLoadingClick = this.onLoadingClick.bind(this);
+        this.onLoadingClick1 = this.onLoadingClick1.bind(this);
+        this.onLoadingClick2 = this.onLoadingClick2.bind(this);
     }
 
-    onLoadingClick() {
-        this.setState({ loading: true, done: false });
+    onLoadingClick1() {
+        this.setState({ loading1: true });
         setTimeout(() => {
-            this.setState({ loading: false, done: true });
+            this.setState({ loading1: false });
+        }, 2000);
+    }
+
+    onLoadingClick2() {
+        this.setState({ loading2: true });
+        setTimeout(() => {
+            this.setState({ loading2: false });
         }, 2000);
     }
 
@@ -51,8 +59,9 @@ export class ButtonDemo extends Component {
                         <h5>Loading</h5>
                         <Button loading />
                         <Button label="Submit" loading />
-                        <Button label="Submit" icon="pi pi-check" loading loadingOptions={{ position: 'right' }} />
-                        <Button label="Submit" icon={this.state.done && 'pi pi-check'} loading={this.state.loading} onClick={this.onLoadingClick} />
+                        <Button label="Submit" iconPos="right" loading />
+                        <Button label="Submit" icon="pi pi-check" loading={this.state.loading1} onClick={this.onLoadingClick1} />
+                        <Button label="Submit" loading={this.state.loading2} onClick={this.onLoadingClick2} />
 
                         <h5>Severities</h5>
                         <Button label="Primary" />
diff --git a/src/showcase/button/ButtonDoc.js b/src/showcase/button/ButtonDoc.js
index 17ba448ca4..3e9001fc24 100644
--- a/src/showcase/button/ButtonDoc.js
+++ b/src/showcase/button/ButtonDoc.js
@@ -22,17 +22,25 @@ export class ButtonDemo extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            loading: false,
-            done: false
+            loading1: false,
+            loading2: false
         }
 
-        this.onLoadingClick = this.onLoadingClick.bind(this);
+        this.onLoadingClick1 = this.onLoadingClick1.bind(this);
+        this.onLoadingClick2 = this.onLoadingClick2.bind(this);
     }
 
-    onLoadingClick() {
-        this.setState({ loading: true, done: false });
+    onLoadingClick1() {
+        this.setState({ loading1: true });
         setTimeout(() => {
-            this.setState({ loading: false, done: true });
+            this.setState({ loading1: false });
+        }, 2000);
+    }
+
+    onLoadingClick2() {
+        this.setState({ loading2: true });
+        setTimeout(() => {
+            this.setState({ loading2: false });
         }, 2000);
     }
 
@@ -53,8 +61,9 @@ export class ButtonDemo extends Component {
                     <h5>Loading</h5>
                     <Button loading />
                     <Button label="Submit" loading />
-                    <Button label="Submit" icon="pi pi-check" loading loadingOptions={{ position: 'right' }} />
-                    <Button label="Submit" icon={this.state.done && 'pi pi-check'} loading={this.state.loading} onClick={this.onLoadingClick} />
+                    <Button label="Submit" iconPos="right" loading />
+                    <Button label="Submit" icon="pi pi-check" loading={this.state.loading1} onClick={this.onLoadingClick1} />
+                    <Button label="Submit" loading={this.state.loading2} onClick={this.onLoadingClick2} />
 
                     <h5>Severities</h5>
                     <Button label="Primary" />
@@ -207,16 +216,22 @@ import './ButtonDemo.css';
 
 const ButtonDemo = () => {
 
-    const [loading, setLoading] = useState(false);
-    const [done, setDone] = useState(false);
+    const [loading1, setLoading1] = useState(false);
+    const [loading2, setLoading2] = useState(false);
+
+    const onLoadingClick1 = () => {
+        setLoading1(true);
+
+        setTimeout(() => {
+            setLoading1(false);
+        }, 2000);
+    }
 
-    const onLoadingClick = () => {
-        setLoading(true);
-        setDone(false)
+    const onLoadingClick2 = () => {
+        setLoading2(true);
 
         setTimeout(() => {
-            setLoading(false);
-            setDone(true);
+            setLoading2(false);
         }, 2000);
     }
 
@@ -236,8 +251,9 @@ const ButtonDemo = () => {
                 <h5>Loading</h5>
                 <Button loading />
                 <Button label="Submit" loading />
-                <Button label="Submit" icon="pi pi-check" loading loadingOptions={{ position: 'right' }} />
-                <Button label="Submit" icon={done && 'pi pi-check'} loading={loading} onClick={onLoadingClick} />
+                <Button label="Submit" iconPos="right" loading />
+                <Button label="Submit" icon="pi pi-check" loading={loading1} onClick={onLoadingClick1} />
+                <Button label="Submit" loading={loading2} onClick={onLoadingClick2} />
 
                 <h5>Severities</h5>
                 <Button label="Primary" />
@@ -389,16 +405,22 @@ import './ButtonDemo.css';
 
 const ButtonDemo = () => {
 
-    const [loading, setLoading] = useState(false);
-    const [done, setDone] = useState(false);
+    const [loading1, setLoading1] = useState(false);
+    const [loading2, setLoading2] = useState(false);
+
+    const onLoadingClick1 = () => {
+        setLoading1(true);
+
+        setTimeout(() => {
+            setLoading1(false);
+        }, 2000);
+    }
 
-    const onLoadingClick = () => {
-        setLoading(true);
-        setDone(false)
+    const onLoadingClick2 = () => {
+        setLoading2(true);
 
         setTimeout(() => {
-            setLoading(false);
-            setDone(true);
+            setLoading2(false);
         }, 2000);
     }
 
@@ -418,8 +440,9 @@ const ButtonDemo = () => {
                 <h5>Loading</h5>
                 <Button loading />
                 <Button label="Submit" loading />
-                <Button label="Submit" icon="pi pi-check" loading loadingOptions={{ position: 'right' }} />
-                <Button label="Submit" icon={done && 'pi pi-check'} loading={loading} onClick={onLoadingClick} />
+                <Button label="Submit" iconPos="right" loading />
+                <Button label="Submit" icon="pi pi-check" loading={loading1} onClick={onLoadingClick1} />
+                <Button label="Submit" loading={loading2} onClick={onLoadingClick2} />
 
                 <h5>Severities</h5>
                 <Button label="Primary" />
@@ -843,13 +866,13 @@ import { Button } from 'primereact/button';
                                         <td>icon</td>
                                         <td>any</td>
                                         <td>null</td>
-                                        <td>Name of the icon.</td>
+                                        <td>Name of the icon or JSX.Element for icon.</td>
                                     </tr>
                                     <tr>
                                         <td>iconPos</td>
                                         <td>string</td>
                                         <td>left</td>
-                                        <td>Position of the icon, valid values are "left" and "right".</td>
+                                        <td>Position of the icon, valid values are "left", "right", "top" and "bottom".</td>
                                     </tr>
                                     <tr>
                                         <td>badge</td>
@@ -882,10 +905,10 @@ import { Button } from 'primereact/button';
                                         <td>Display loading icon of the button</td>
                                     </tr>
                                     <tr>
-                                        <td>loadingOptions</td>
-                                        <td>object</td>
+                                        <td>loadingIcon</td>
+                                        <td>any</td>
                                         <td>null</td>
-                                        <td>Configuration of the loading that contains custom icon and position of the loading</td>
+                                        <td>Name of the loading icon or JSX.Element for loading icon.</td>
                                     </tr>
                                 </tbody>
                             </table>