From 3bb551eb1e1f9508fb651168702eb2e8649a54da Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 18 Jul 2020 15:40:00 +0300
Subject: [PATCH] Add p-button-plain add-on for text button

---
 public/themes/arya-blue/theme.css             |  11 +
 public/themes/arya-green/theme.css            |  11 +
 public/themes/arya-orange/theme.css           |  11 +
 public/themes/arya-purple/theme.css           |  11 +
 public/themes/bootstrap4-dark-blue/theme.css  |  11 +
 .../themes/bootstrap4-dark-purple/theme.css   |  11 +
 public/themes/bootstrap4-light-blue/theme.css |  11 +
 .../themes/bootstrap4-light-purple/theme.css  |  11 +
 public/themes/luna-amber/theme.css            |  11 +
 public/themes/luna-blue/theme.css             |  11 +
 public/themes/luna-green/theme.css            |  11 +
 public/themes/luna-pink/theme.css             |  11 +
 public/themes/md-dark-deeppurple/theme.css    |  11 +
 public/themes/md-dark-indigo/theme.css        |  11 +
 public/themes/md-light-deeppurple/theme.css   |  11 +
 public/themes/md-light-indigo/theme.css       |  11 +
 public/themes/mdc-dark-deeppurple/theme.css   |  11 +
 public/themes/mdc-dark-indigo/theme.css       |  11 +
 public/themes/mdc-light-deeppurple/theme.css  |  11 +
 public/themes/mdc-light-indigo/theme.css      |  11 +
 public/themes/nova-accent/theme.css           |  11 +
 public/themes/nova-alt/theme.css              |  11 +
 public/themes/nova-vue/theme.css              |  11 +
 public/themes/nova/theme.css                  |  11 +
 public/themes/rhea/theme.css                  |  11 +
 public/themes/saga-blue/theme.css             |  11 +
 public/themes/saga-green/theme.css            |  11 +
 public/themes/saga-orange/theme.css           |  11 +
 public/themes/saga-purple/theme.css           |  11 +
 public/themes/vela-blue/theme.css             |  11 +
 public/themes/vela-green/theme.css            |  11 +
 public/themes/vela-orange/theme.css           |  11 +
 public/themes/vela-purple/theme.css           |  11 +
 src/views/button/ButtonDemo.vue               |   5 +-
 src/views/button/ButtonDoc.vue                | 212 +++++++++---------
 35 files changed, 475 insertions(+), 105 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 88177a698..b687b17ea 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1261,6 +1261,17 @@
   color: #64B5F6;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 3eecb0c00..9a506127e 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1261,6 +1261,17 @@
   color: #81C784;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index e83d40a02..ff3191a11 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1261,6 +1261,17 @@
   color: #FFD54F;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index c28331236..9eb840500 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -1261,6 +1261,17 @@
   color: #BA68C8;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 5ff42314e..8a38f1d36 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1261,6 +1261,17 @@
   color: #8dd0ff;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 83e9192fd..d42f3de8c 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -1261,6 +1261,17 @@
   color: #c298d8;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 42ccdae15..e37c4f918 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1261,6 +1261,17 @@
   color: #007bff;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #6c757d;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #e9ecef;
+  color: #6c757d;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #dee2e6;
+  color: #6c757d;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 21937ca6c..b00e66a02 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -1261,6 +1261,17 @@
   color: #883cae;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #6c757d;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #e9ecef;
+  color: #6c757d;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #dee2e6;
+  color: #6c757d;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 6a3822fcf..26348c89a 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1261,6 +1261,17 @@
   color: #FFE082;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #888888;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #4c4c4c;
+  color: #888888;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #3c3c3c;
+  color: #888888;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 2e13c34b6..b0ca1807d 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1261,6 +1261,17 @@
   color: #81D4FA;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #888888;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #4c4c4c;
+  color: #888888;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #3c3c3c;
+  color: #888888;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index f160c5780..c17fb3e52 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1261,6 +1261,17 @@
   color: #C5E1A5;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #888888;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #4c4c4c;
+  color: #888888;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #3c3c3c;
+  color: #888888;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 423cc11f6..c5feb072a 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1261,6 +1261,17 @@
   color: #F48FB1;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #888888;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #4c4c4c;
+  color: #888888;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #3c3c3c;
+  color: #888888;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 1186ae6a2..e3fcb44b1 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -1273,6 +1273,17 @@
   color: #CE93D8;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index ab2537d3d..6b5ebc8e6 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -1273,6 +1273,17 @@
   color: #9FA8DA;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 1cd1985bc..e7266bf6f 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -1273,6 +1273,17 @@
   color: #673AB7;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(0, 0, 0, 0.16);
+  color: rgba(0, 0, 0, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 2a6181e1e..e498eb9fc 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1273,6 +1273,17 @@
   color: #3F51B5;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(0, 0, 0, 0.16);
+  color: rgba(0, 0, 0, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 0fc884777..7044ec178 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -1273,6 +1273,17 @@
   color: #673AB7;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index e0cf467a0..f0046bce6 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -1273,6 +1273,17 @@
   color: #3F51B5;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 3e302eee1..14c735a0f 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -1273,6 +1273,17 @@
   color: #673AB7;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(0, 0, 0, 0.16);
+  color: rgba(0, 0, 0, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index bfccf6e76..e63cfa711 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1273,6 +1273,17 @@
   color: #3F51B5;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(0, 0, 0, 0.16);
+  color: rgba(0, 0, 0, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 199a0ef94..fce9f44c5 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1249,6 +1249,17 @@
   color: #007ad9;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #848484;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #eaeaea;
+  color: #848484;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #d2d2d2;
+  color: #848484;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index d318ff3a6..83e99505d 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1261,6 +1261,17 @@
   color: #007ad9;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #848484;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #eaeaea;
+  color: #848484;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #d2d2d2;
+  color: #848484;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index c3076c801..9801abff3 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1261,6 +1261,17 @@
   color: #41b883;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #848484;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #eaeaea;
+  color: #848484;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #d2d2d2;
+  color: #848484;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 42a3bda95..8d2e31324 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1261,6 +1261,17 @@
   color: #007ad9;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #848484;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #eaeaea;
+  color: #848484;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #d2d2d2;
+  color: #848484;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 75e462df2..294bb71c2 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1249,6 +1249,17 @@
   color: #7B95A3;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #a6a6a6;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #f4f4f4;
+  color: #a6a6a6;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #dbdbdb;
+  color: #a6a6a6;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 5ac221224..48cbf228a 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1261,6 +1261,17 @@
   color: #2196F3;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #6c757d;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #e9ecef;
+  color: #6c757d;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #dee2e6;
+  color: #6c757d;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index f8ab4a1fb..bf0a8d34d 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1261,6 +1261,17 @@
   color: #4CAF50;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #6c757d;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #e9ecef;
+  color: #6c757d;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #dee2e6;
+  color: #6c757d;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 631ecacda..975457569 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1261,6 +1261,17 @@
   color: #FFC107;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #6c757d;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #e9ecef;
+  color: #6c757d;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #dee2e6;
+  color: #6c757d;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index f7957e7a2..1e1186e82 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -1261,6 +1261,17 @@
   color: #9C27B0;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: #6c757d;
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: #e9ecef;
+  color: #6c757d;
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: #dee2e6;
+  color: #6c757d;
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index f9d639818..7aa697d57 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1261,6 +1261,17 @@
   color: #64B5F6;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 2460a12bc..894557f3a 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1261,6 +1261,17 @@
   color: #81C784;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index f74a13498..3fd3992f0 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1261,6 +1261,17 @@
   color: #FFD54F;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 889ddbcfb..9df15e57e 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1261,6 +1261,17 @@
   color: #BA68C8;
   border-color: transparent;
 }
+.p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:hover {
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-button.p-button-text.p-button-plain:enabled:active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue
index a0df83dfe..8b0ac941f 100755
--- a/src/views/button/ButtonDemo.vue
+++ b/src/views/button/ButtonDemo.vue
@@ -54,6 +54,7 @@
                 <Button label="Warning" class="p-button-warning p-button-text" />
                 <Button label="Help" class="p-button-help p-button-text" />
                 <Button label="Danger" class="p-button-danger p-button-text" />
+                <Button label="Plain" class="p-button-text p-button-plain" />
 
                 <h5>Raised Text Buttons</h5>
                 <Button label="Primary" class="p-button-raised p-button-text" />
@@ -63,6 +64,7 @@
                 <Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
                 <Button label="Help" class="p-button-raised p-button-help p-button-text" />
                 <Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
+                <Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
 
                 <h5>Outlined Buttons</h5>
                 <Button label="Primary" class="p-button-outlined" />
@@ -74,13 +76,13 @@
                 <Button label="Danger" class="p-button-outlined p-button-danger" />
 
                 <h5>Rounded Icon Buttons</h5>
-                <Button icon="pi pi-check" class="p-button-rounded" />
                 <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
                 <Button icon="pi pi-search" class="p-button-rounded p-button-success" />
                 <Button icon="pi pi-user" class="p-button-rounded p-button-info" />
                 <Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
                 <Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
                 <Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
+                <Button icon="pi pi-check" class="p-button-rounded" />
 
                 <h5>Rounded Text Icon Buttons</h5>
                 <Button icon="pi pi-check" class="p-button-rounded p-button-text" />
@@ -90,6 +92,7 @@
                 <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
                 <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
                 <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
+                <Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
 
                 <h5>Rounded and Outlined Icon Buttons</h5>
                 <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue
index 9a9185fbe..e15bc96f9 100755
--- a/src/views/button/ButtonDoc.vue
+++ b/src/views/button/ButtonDoc.vue
@@ -29,15 +29,6 @@ import Button from 'primevue/button';
 				<p>Events are defined with the standard notation.</p>
 <CodeHighlight>
 &lt;Button label="Submit" @click="handleClick($event)"/&gt;
-</CodeHighlight>
-
-                <h5>Text Buttons</h5>
-				<p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling.</p>
-<CodeHighlight>
-&lt;Button label="Submit" class="p-button-text" /&gt;
-&lt;Button icon="pi pi-check" class="p-button-text" /&gt;
-&lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt;
-&lt;Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text" /&gt;
 </CodeHighlight>
 
 				<h5>Severity</h5>
@@ -60,6 +51,16 @@ import Button from 'primevue/button';
 &lt;Button label="Warning" class="p-button-warning" /&gt;
 &lt;Button label="Warning" class="p-button-help" /&gt;
 &lt;Button label="Danger" class="p-button-danger" /&gt;
+</CodeHighlight>
+
+                <h5>Text Buttons</h5>
+				<p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i>
+                text buttons ignore severity levels and displayed as a regular text.</p>
+<CodeHighlight>
+&lt;Button label="Submit" class="p-button-text" /&gt;
+&lt;Button icon="pi pi-check" class="p-button-text" /&gt;
+&lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt;
+&lt;Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text p-button-text" /&gt;
 </CodeHighlight>
 
 				<h5>Raised and Rounded Buttons</h5>
@@ -207,114 +208,117 @@ import Button from 'primevue/button';
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;h5&gt;Basic&lt;/h5&gt;
-&lt;Button label="Submit" /&gt;
-&lt;Button label="Submit" disabled="disabled" /&gt;
-&lt;Button label="Link" class="p-button-link" /&gt;
+&gt;h5&lt;Basic&gt;/h5&lt;
+&gt;Button label="Submit" /&lt;
+&gt;Button label="Disabled" disabled="disabled" /&lt;
+&gt;Button label="Link" class="p-button-link" /&lt;
 
-&lt;h5&gt;Icons&lt;/h5&gt;
-&lt;Button icon="pi pi-check" /&gt;
-&lt;Button label="Submit" icon="pi pi-check" /&gt;
-&lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt;
+&gt;h5&lt;Icons&gt;/h5&lt;
+&gt;Button icon="pi pi-check" /&lt;
+&gt;Button label="Submit" icon="pi pi-check" /&lt;
+&gt;Button label="Submit" icon="pi pi-check" iconPos="right" /&lt;
 
-&lt;h5&gt;Severities&lt;/h5&gt;
-&lt;Button label="Primary" /&gt;
-&lt;Button label="Secondary" class="p-button-secondary" /&gt;
-&lt;Button label="Success" class="p-button-success" /&gt;
-&lt;Button label="Info" class="p-button-info" /&gt;
-&lt;Button label="Warning" class="p-button-warning" /&gt;
-&lt;Button label="Help" class="p-button-help" /&gt;
-&lt;Button label="Danger" class="p-button-danger" /&gt;
+&gt;h5&lt;Severities&gt;/h5&lt;
+&gt;Button label="Primary" /&lt;
+&gt;Button label="Secondary" class="p-button-secondary" /&lt;
+&gt;Button label="Success" class="p-button-success" /&lt;
+&gt;Button label="Info" class="p-button-info" /&lt;
+&gt;Button label="Warning" class="p-button-warning" /&lt;
+&gt;Button label="Help" class="p-button-help" /&lt;
+&gt;Button label="Danger" class="p-button-danger" /&lt;
 
-&lt;h5&gt;Raised Buttons&lt;/h5&gt;
-&lt;Button label="Primary" class="p-button-raised" /&gt;
-&lt;Button label="Secondary" class="p-button-raised p-button-secondary" /&gt;
-&lt;Button label="Success" class="p-button-raised p-button-success" /&gt;
-&lt;Button label="Info" class="p-button-raised p-button-info" /&gt;
-&lt;Button label="Warning" class="p-button-raised p-button-warning" /&gt;
-&lt;Button label="Help" class="p-button-raised p-button-help" /&gt;
-&lt;Button label="Danger" class="p-button-raised p-button-danger" /&gt;
+&gt;h5&lt;Raised Buttons&gt;/h5&lt;
+&gt;Button label="Primary" class="p-button-raised" /&lt;
+&gt;Button label="Secondary" class="p-button-raised p-button-secondary" /&lt;
+&gt;Button label="Success" class="p-button-raised p-button-success" /&lt;
+&gt;Button label="Info" class="p-button-raised p-button-info" /&lt;
+&gt;Button label="Warning" class="p-button-raised p-button-warning" /&lt;
+&gt;Button label="Help" class="p-button-raised p-button-help" /&lt;
+&gt;Button label="Danger" class="p-button-raised p-button-danger" /&lt;
 
-&lt;h5&gt;Rounded Buttons&lt;/h5&gt;
-&lt;Button label="Primary" class="p-button-rounded" /&gt;
-&lt;Button label="Secondary" class="p-button-rounded p-button-secondary" /&gt;
-&lt;Button label="Success" class="p-button-rounded p-button-success" /&gt;
-&lt;Button label="Info" class="p-button-rounded p-button-info" /&gt;
-&lt;Button label="Warning" class="p-button-rounded p-button-warning" /&gt;
-&lt;Button label="Help" class="p-button-rounded p-button-help" /&gt;
-&lt;Button label="Danger" class="p-button-rounded p-button-danger" /&gt;
+&gt;h5&lt;Rounded Buttons&gt;/h5&lt;
+&gt;Button label="Primary" class="p-button-rounded" /&lt;
+&gt;Button label="Secondary" class="p-button-rounded p-button-secondary" /&lt;
+&gt;Button label="Success" class="p-button-rounded p-button-success" /&lt;
+&gt;Button label="Info" class="p-button-rounded p-button-info" /&lt;
+&gt;Button label="Warning" class="p-button-rounded p-button-warning" /&lt;
+&gt;Button label="Help" class="p-button-rounded p-button-help" /&lt;
+&gt;Button label="Danger" class="p-button-rounded p-button-danger" /&lt;
 
-&lt;h5&gt;Text Buttons&lt;/h5&gt;
-&lt;Button label="Primary" class="p-button-text" /&gt;
-&lt;Button label="Secondary" class="p-button-secondary p-button-text" /&gt;
-&lt;Button label="Success" class="p-button-success p-button-text" /&gt;
-&lt;Button label="Info" class="p-button-info p-button-text" /&gt;
-&lt;Button label="Warning" class="p-button-warning p-button-text" /&gt;
-&lt;Button label="Help" class="p-button-help p-button-text" /&gt;
-&lt;Button label="Danger" class="p-button-danger p-button-text" /&gt;
+&gt;h5&lt;Text Buttons&gt;/h5&lt;
+&gt;Button label="Primary" class="p-button-text" /&lt;
+&gt;Button label="Secondary" class="p-button-secondary p-button-text" /&lt;
+&gt;Button label="Success" class="p-button-success p-button-text" /&lt;
+&gt;Button label="Info" class="p-button-info p-button-text" /&lt;
+&gt;Button label="Warning" class="p-button-warning p-button-text" /&lt;
+&gt;Button label="Help" class="p-button-help p-button-text" /&lt;
+&gt;Button label="Danger" class="p-button-danger p-button-text" /&lt;
+&gt;Button label="Plain" class="p-button-text p-button-plain" /&lt;
 
-&lt;h5&gt;Raised Text Buttons&lt;/h5&gt;
-&lt;Button label="Primary" class="p-button-raised p-button-text" /&gt;
-&lt;Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" /&gt;
-&lt;Button label="Success" class="p-button-raised p-button-success p-button-text" /&gt;
-&lt;Button label="Info" class="p-button-raised p-button-info p-button-text" /&gt;
-&lt;Button label="Warning" class="p-button-raised p-button-warning p-button-text" /&gt;
-&lt;Button label="Help" class="p-button-raised p-button-help p-button-text" /&gt;
-&lt;Button label="Danger" class="p-button-raised p-button-danger p-button-text" /&gt;
+&gt;h5&lt;Raised Text Buttons&gt;/h5&lt;
+&gt;Button label="Primary" class="p-button-raised p-button-text" /&lt;
+&gt;Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" /&lt;
+&gt;Button label="Success" class="p-button-raised p-button-success p-button-text" /&lt;
+&gt;Button label="Info" class="p-button-raised p-button-info p-button-text" /&lt;
+&gt;Button label="Warning" class="p-button-raised p-button-warning p-button-text" /&lt;
+&gt;Button label="Help" class="p-button-raised p-button-help p-button-text" /&lt;
+&gt;Button label="Danger" class="p-button-raised p-button-danger p-button-text" /&lt;
+&gt;Button label="Plain" class="p-button-raised p-button-text p-button-plain" /&lt;
 
-&lt;h5&gt;Outlined Buttons&lt;/h5&gt;
-&lt;Button label="Primary" class="p-button-outlined" /&gt;
-&lt;Button label="Secondary" class="p-button-outlined p-button-secondary" /&gt;
-&lt;Button label="Success" class="p-button-outlined p-button-success" /&gt;
-&lt;Button label="Info" class="p-button-outlined p-button-info" /&gt;
-&lt;Button label="Warning" class="p-button-outlined p-button-warning" /&gt;
-&lt;Button label="Help" class="p-button-outlined p-button-help" /&gt;
-&lt;Button label="Danger" class="p-button-outlined p-button-danger" /&gt;
+&gt;h5&lt;Outlined Buttons&gt;/h5&lt;
+&gt;Button label="Primary" class="p-button-outlined" /&lt;
+&gt;Button label="Secondary" class="p-button-outlined p-button-secondary" /&lt;
+&gt;Button label="Success" class="p-button-outlined p-button-success" /&lt;
+&gt;Button label="Info" class="p-button-outlined p-button-info" /&lt;
+&gt;Button label="Warning" class="p-button-outlined p-button-warning" /&lt;
+&gt;Button label="Help" class="p-button-outlined p-button-help" /&lt;
+&gt;Button label="Danger" class="p-button-outlined p-button-danger" /&lt;
 
-&lt;h5&gt;Rounded Icon Buttons&lt;/h5&gt;
-&lt;Button icon="pi pi-check" class="p-button-rounded" /&gt;
-&lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" /&gt;
-&lt;Button icon="pi pi-search" class="p-button-rounded p-button-success" /&gt;
-&lt;Button icon="pi pi-user" class="p-button-rounded p-button-info" /&gt;
-&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning" /&gt;
-&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help" /&gt;
-&lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger" /&gt;
+&gt;h5&lt;Rounded Icon Buttons&gt;/h5&lt;
+&gt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" /&lt;
+&gt;Button icon="pi pi-search" class="p-button-rounded p-button-success" /&lt;
+&gt;Button icon="pi pi-user" class="p-button-rounded p-button-info" /&lt;
+&gt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning" /&lt;
+&gt;Button icon="pi pi-heart" class="p-button-rounded p-button-help" /&lt;
+&gt;Button icon="pi pi-times" class="p-button-rounded p-button-danger" /&lt;
+&gt;Button icon="pi pi-check" class="p-button-rounded" /&lt;
 
-&lt;h5&gt;Rounded Text Icon Buttons&lt;/h5&gt;
-&lt;Button icon="pi pi-check" class="p-button-rounded p-button-text" /&gt;
-&lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" /&gt;
-&lt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" /&gt;
-&lt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" /&gt;
-&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" /&gt;
-&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" /&gt;
-&lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" /&gt;
+&gt;h5&lt;Rounded Text Icon Buttons&gt;/h5&lt;
+&gt;Button icon="pi pi-check" class="p-button-rounded p-button-text" /&lt;
+&gt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" /&lt;
+&gt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" /&lt;
+&gt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" /&lt;
+&gt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" /&lt;
+&gt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" /&lt;
+&gt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" /&lt;
+&gt;Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" /&lt;
 
-&lt;h5&gt;Rounded and Outlined Icon Buttons&lt;/h5&gt;
-&lt;Button icon="pi pi-check" class="p-button-rounded p-button-outlined" /&gt;
-&lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" /&gt;
-&lt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" /&gt;
-&lt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" /&gt;
-&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" /&gt;
-&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" /&gt;
-&lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" /&gt;
+&gt;h5&lt;Rounded and Outlined Icon Buttons&gt;/h5&lt;
+&gt;Button icon="pi pi-check" class="p-button-rounded p-button-outlined" /&lt;
+&gt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" /&lt;
+&gt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" /&lt;
+&gt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" /&lt;
+&gt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" /&lt;
+&gt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" /&lt;
+&gt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" /&lt;
 
-&lt;h5&gt;Badges&lt;/h5&gt;
-&lt;Button type="button" label="Emails" badge="8" /&gt;
-&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
+&gt;h5&lt;Badges&gt;/h5&lt;
+&gt;Button type="button" label="Emails" badge="8" /&lt;
+&gt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&lt;
 
-&lt;h5&gt;Button Set&lt;/h5&gt;
-&lt;span class="p-buttonset"&gt;
-    &lt;Button label="Save" icon="pi pi-check" /&gt;
-    &lt;Button label="Delete" icon="pi pi-trash" /&gt;
-    &lt;Button label="Cancel" icon="pi pi-times" /&gt;
-&lt;/span&gt;
+&gt;h5&lt;Button Set&gt;/h5&lt;
+&gt;span class="p-buttonset"&lt;
+    &gt;Button label="Save" icon="pi pi-check" /&lt;
+    &gt;Button label="Delete" icon="pi pi-trash" /&lt;
+    &gt;Button label="Cancel" icon="pi pi-times" /&lt;
+&gt;/span&lt;
 
-&lt;h5&gt;Sizes&lt;/h5&gt;
-&lt;div class="sizes"&gt;
-    &lt;Button label="Small" icon="pi pi-check" class="p-button-sm"  /&gt;
-    &lt;Button label="Normal" icon="pi pi-check" class="p-button"  /&gt;
-    &lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
-&lt;/div&gt;
+&gt;h5&lt;Sizes&gt;/h5&lt;
+&gt;div class="sizes"&lt;
+    &gt;Button label="Small" icon="pi pi-check" class="p-button-sm"  /&lt;
+    &gt;Button label="Normal" icon="pi pi-check" class="p-button"  /&lt;
+    &gt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&lt;
+&gt;/div&lt;
 </template>
 </CodeHighlight>