From b936c9a135310e032f9a7fec3a42551f060b7157 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 9 May 2020 02:36:45 +0300
Subject: [PATCH] Implemented button badges

---
 public/themes/luna-amber/theme.css      |  7 +++
 public/themes/luna-green/theme.css      |  7 +++
 public/themes/luna-pink/theme.css       |  7 +++
 public/themes/nova-colored/theme.css    |  7 +++
 public/themes/nova-dark/theme.css       |  7 +++
 public/themes/nova-light/theme.css      |  7 +++
 public/themes/nova-vue/theme.css        |  7 +++
 public/themes/rhea/theme.css            |  7 +++
 public/themes/saga-blue/theme.css       |  7 +++
 public/themes/saga-cyan/theme.css       |  7 +++
 public/themes/saga-deeppurple/theme.css |  7 +++
 public/themes/saga-green/theme.css      |  7 +++
 public/themes/saga-indigo/theme.css     |  7 +++
 public/themes/saga-orange/theme.css     |  7 +++
 public/themes/saga-purple/theme.css     |  7 +++
 public/themes/saga-teal/theme.css       |  7 +++
 public/themes/vela-blue/theme.css       |  7 +++
 public/themes/vela-cyan/theme.css       |  7 +++
 public/themes/vela-deeppurple/theme.css |  7 +++
 public/themes/vela-green/theme.css      |  7 +++
 public/themes/vela-indigo/theme.css     |  7 +++
 public/themes/vela-orange/theme.css     |  7 +++
 public/themes/vela-purple/theme.css     |  7 +++
 public/themes/vela-teal/theme.css       |  7 +++
 src/assets/styles/app.scss              |  6 +-
 src/components/button/Button.vue        |  8 +++
 src/views/badge/BadgeDemo.vue           | 73 +++++++++++++++----------
 27 files changed, 221 insertions(+), 34 deletions(-)

diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 6f37a809f..8bca9509b 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3378,6 +3381,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #f4f4f4;
+  color: #333333;
+}
 .p-badge.p-badge-success {
   background-color: #34A835;
   color: #ffffff;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 7dcf16532..32e2f297e 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3378,6 +3381,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #f4f4f4;
+  color: #333333;
+}
 .p-badge.p-badge-success {
   background-color: #34A835;
   color: #ffffff;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 279322ce4..63ce3759f 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3378,6 +3381,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #f4f4f4;
+  color: #333333;
+}
 .p-badge.p-badge-success {
   background-color: #34A835;
   color: #ffffff;
diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
index 9d516edc2..a0534f85d 100644
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3378,6 +3381,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #f4f4f4;
+  color: #333333;
+}
 .p-badge.p-badge-success {
   background-color: #34A835;
   color: #ffffff;
diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
index 45bf93a4b..09925ab17 100644
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3378,6 +3381,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #f4f4f4;
+  color: #333333;
+}
 .p-badge.p-badge-success {
   background-color: #34A835;
   color: #ffffff;
diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index c217ec6a9..e2a616eba 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3378,6 +3381,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #f4f4f4;
+  color: #333333;
+}
 .p-badge.p-badge-success {
   background-color: #34A835;
   color: #ffffff;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index f5e3bae38..fcfb2c37c 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3378,6 +3381,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #f4f4f4;
+  color: #333333;
+}
 .p-badge.p-badge-success {
   background-color: #34A835;
   color: #ffffff;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index aab459950..722a43e2c 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3378,6 +3381,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #f3f3f3;
+  color: #333333;
+}
 .p-badge.p-badge-success {
   background-color: #A3E2C6;
   color: #323E39;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 9e09b88cd..45bc2a7c5 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #ffffff;
+  color: #1976D2;
+}
 .p-badge.p-badge-success {
   background-color: #689F38;
   color: #ffffff;
diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css
index d7e381dfb..c04dd7211 100644
--- a/public/themes/saga-cyan/theme.css
+++ b/public/themes/saga-cyan/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #ffffff;
+  color: #00838F;
+}
 .p-badge.p-badge-success {
   background-color: #689F38;
   color: #ffffff;
diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css
index ddfe195e5..f3e214b27 100644
--- a/public/themes/saga-deeppurple/theme.css
+++ b/public/themes/saga-deeppurple/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #ffffff;
+  color: #512DA8;
+}
 .p-badge.p-badge-success {
   background-color: #689F38;
   color: #ffffff;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 49baeadbc..215da22ea 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #ffffff;
+  color: #388E3C;
+}
 .p-badge.p-badge-success {
   background-color: #689F38;
   color: #ffffff;
diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css
index e2cc8e6bf..6a5ff74fb 100644
--- a/public/themes/saga-indigo/theme.css
+++ b/public/themes/saga-indigo/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #ffffff;
+  color: #303F9F;
+}
 .p-badge.p-badge-success {
   background-color: #689F38;
   color: #ffffff;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index ec6aa7618..8ee90f132 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #ffffff;
+  color: #FFA000;
+}
 .p-badge.p-badge-success {
   background-color: #689F38;
   color: #ffffff;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index cea27b662..a35cf92aa 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #ffffff;
+  color: #7B1FA2;
+}
 .p-badge.p-badge-success {
   background-color: #689F38;
   color: #ffffff;
diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css
index cc1c7a563..34d61f320 100644
--- a/public/themes/saga-teal/theme.css
+++ b/public/themes/saga-teal/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: #ffffff;
+  color: #00796B;
+}
 .p-badge.p-badge-success {
   background-color: #689F38;
   color: #ffffff;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index a5c2a6d9f..9af74bece 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: transparent;
+  color: #64B5F6;
+}
 .p-badge.p-badge-success {
   background-color: #AED581;
   color: #212529;
diff --git a/public/themes/vela-cyan/theme.css b/public/themes/vela-cyan/theme.css
index 0f3e7ff3f..76c8653f0 100644
--- a/public/themes/vela-cyan/theme.css
+++ b/public/themes/vela-cyan/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: transparent;
+  color: #4DD0E1;
+}
 .p-badge.p-badge-success {
   background-color: #AED581;
   color: #212529;
diff --git a/public/themes/vela-deeppurple/theme.css b/public/themes/vela-deeppurple/theme.css
index ef334b80b..8f9df8428 100644
--- a/public/themes/vela-deeppurple/theme.css
+++ b/public/themes/vela-deeppurple/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: transparent;
+  color: #9575CD;
+}
 .p-badge.p-badge-success {
   background-color: #AED581;
   color: #212529;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 0002c9486..f0dafdec0 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: transparent;
+  color: #81C784;
+}
 .p-badge.p-badge-success {
   background-color: #AED581;
   color: #212529;
diff --git a/public/themes/vela-indigo/theme.css b/public/themes/vela-indigo/theme.css
index bbfd6d422..53e2be3ac 100644
--- a/public/themes/vela-indigo/theme.css
+++ b/public/themes/vela-indigo/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: transparent;
+  color: #7986CB;
+}
 .p-badge.p-badge-success {
   background-color: #AED581;
   color: #212529;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index cf79f7727..ff2b40926 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: transparent;
+  color: #FFD54F;
+}
 .p-badge.p-badge-success {
   background-color: #AED581;
   color: #212529;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 7f0682d6e..a24c67a75 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: transparent;
+  color: #BA68C8;
+}
 .p-badge.p-badge-success {
   background-color: #AED581;
   color: #212529;
diff --git a/public/themes/vela-teal/theme.css b/public/themes/vela-teal/theme.css
index b835c7b6b..5e87e08c4 100644
--- a/public/themes/vela-teal/theme.css
+++ b/public/themes/vela-teal/theme.css
@@ -1108,6 +1108,9 @@
 .p-button .p-button-icon-right {
   margin-left: 0.5em;
 }
+.p-button .p-badge {
+  margin-left: 0.5em;
+}
 .p-button.p-button-icon-only {
   width: 2.357em;
 }
@@ -3412,6 +3415,10 @@
   height: 2em;
   line-height: 2em;
 }
+.p-badge.p-badge-secondary {
+  background-color: transparent;
+  color: #4DB6AC;
+}
 .p-badge.p-badge-success {
   background-color: #AED581;
   color: #212529;
diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
index 4b4a36ee4..7cd417270 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -454,11 +454,6 @@ a {
     .content-section {
         display: block;
         padding: 30px;
-        background-color: #f5f7f8;
-
-        &:first-of-type > div > span {
-            line-height: 1.5em;
-        }
 
         h2 {
             margin-top: 0;
@@ -588,6 +583,7 @@ a {
 
         &.documentation {
             border-top: 1px solid #dadada;
+            background-color: #f5f7f8;
 
             h3 {
                 color:  #495057;
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index ad5d9508c..817b4f5d5 100755
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -2,6 +2,7 @@
     <button :class="buttonClass" v-on="$listeners">
         <span v-if="icon" :class="iconClass"></span>
         <span class="p-button-text">{{label||'&nbsp;'}}</span>
+        <span class="p-badge" v-if="badge" :class="badgeClass">{{badge}}</span>
     </button>
 </template>
 
@@ -17,6 +18,13 @@ export default {
         iconPos: {
             type: String,
             default: 'left'
+        },
+        badge: {
+            type: String
+        },
+        badgeClass: {
+            type: String,
+            default: 'p-badge-secondary'
         }
     },
     computed: {
diff --git a/src/views/badge/BadgeDemo.vue b/src/views/badge/BadgeDemo.vue
index df52b6929..c68f50de1 100644
--- a/src/views/badge/BadgeDemo.vue
+++ b/src/views/badge/BadgeDemo.vue
@@ -9,25 +9,31 @@
 
         <div class="content-section implementation">
             <h3>Numbers</h3>
-            <span class="p-badge">2</span>
-            <span class="p-badge p-badge-success">8</span>
-            <span class="p-badge p-badge-info">4</span>
-            <span class="p-badge p-badge-warning">12</span>
-            <span class="p-badge p-badge-danger">3</span>
-
+            <div class="badges">
+                 <span class="p-badge">2</span>
+                <span class="p-badge p-badge-success">8</span>
+                <span class="p-badge p-badge-info">4</span>
+                <span class="p-badge p-badge-warning">12</span>
+                <span class="p-badge p-badge-danger">3</span>
+            </div>
+           
             <h3>Tags</h3>
-            <span class="p-tag">Primary</span> 
-            <span class="p-tag p-tag-success">Success</span>
-            <span class="p-tag p-tag-info">Info</span>
-            <span class="p-tag p-tag-warning">Warning</span>
-            <span class="p-tag p-tag-danger">Danger</span>
+            <div class="badges">
+                <span class="p-tag">Primary</span> 
+                <span class="p-tag p-tag-success">Success</span>
+                <span class="p-tag p-tag-info">Info</span>
+                <span class="p-tag p-tag-warning">Warning</span>
+                <span class="p-tag p-tag-danger">Danger</span>
+            </div>
 
             <h3>Pills</h3>
-            <span class="p-tag p-tag-rounded">Primary</span>
-            <span class="p-tag p-tag-rounded p-tag-success">Success</span>
-            <span class="p-tag p-tag-rounded p-tag-info">Info</span>
-            <span class="p-tag p-tag-rounded p-tag-warning">Warning</span>
-            <span class="p-tag p-tag-rounded p-tag-danger">Danger</span>
+            <div class="badges">
+                <span class="p-tag p-tag-rounded">Primary</span>
+                <span class="p-tag p-tag-rounded p-tag-success">Success</span>
+                <span class="p-tag p-tag-rounded p-tag-info">Info</span>
+                <span class="p-tag p-tag-rounded p-tag-warning">Warning</span>
+                <span class="p-tag p-tag-rounded p-tag-danger">Danger</span>
+            </div>
 
             <h3>Positioned Badge</h3>
             <span class="p-overlay-badge">
@@ -40,15 +46,22 @@
                 <Button type="button" label="New" />
             </span>
 
-            <h3>Sizes</h3>
-            <span class="p-badge" style="font-size: 1em">2</span>
-            <span class="p-badge p-badge-success" style="font-size: 1.25em">8</span>
-            <span class="p-badge p-badge-info" style="font-size: 1.5em">4</span>
-            <span class="p-badge p-badge-warning" style="font-size: 1.75em">12</span>
-            <span class="p-badge p-badge-danger" style="font-size: 2em">3</span>
+            <h3>Inline Button Badge</h3>
+            <Button type="button" label="Emails" badge="8" />
+            <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-" />
 
-            <h1>Heading 1 <span class="p-tag p-tag-success">New</span></h1>
-            <h2>Heading 2 <span class="p-tag p-tag-success">New</span></h2>
+            <h3>Sizes</h3>
+            <div class="badges">
+                <span class="p-badge" style="font-size: 1em">2</span>
+                <span class="p-badge p-badge-success" style="font-size: 1.25em">8</span>
+                <span class="p-badge p-badge-info" style="font-size: 1.5em">4</span>
+                <span class="p-badge p-badge-warning" style="font-size: 1.75em">12</span>
+                <span class="p-badge p-badge-danger" style="font-size: 2em">3</span>
+
+                <h1>Heading 1 <span class="p-tag p-tag-success">New</span></h1>
+                <h2>Heading 2 <span class="p-tag p-tag-success">New</span></h2>
+            </div>
+           
         </div>
 
         <BadgeDoc />
@@ -71,16 +84,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.p-badge, .p-tag {
+.badges {
+    .p-badge, .p-tag {
+        margin-right: .5em;
+    }
+}
+
+.p-button {
     margin-right: .5em;
 }
 
 .p-overlay-badge {
     margin-right: 2em;
-
-    .p-badge {
-        margin-right: 0;
-    }
 }
 
 /deep/ h1, h2 {