Implemented button badges

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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: {

src/views/badge/BadgeDemo.vue

@@ -9,25 +9,31 @@
 
         <div class="content-section implementation">
             <h3>Numbers</h3>
-            <span class="p-badge">2</span>
+            <div class="badges">
-            <span class="p-badge p-badge-success">8</span>
+                 <span class="p-badge">2</span>
-            <span class="p-badge p-badge-info">4</span>
+                <span class="p-badge p-badge-success">8</span>
-            <span class="p-badge p-badge-warning">12</span>
+                <span class="p-badge p-badge-info">4</span>
-            <span class="p-badge p-badge-danger">3</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> 
+            <div class="badges">
-            <span class="p-tag p-tag-success">Success</span>
+                <span class="p-tag">Primary</span> 
-            <span class="p-tag p-tag-info">Info</span>
+                <span class="p-tag p-tag-success">Success</span>
-            <span class="p-tag p-tag-warning">Warning</span>
+                <span class="p-tag p-tag-info">Info</span>
-            <span class="p-tag p-tag-danger">Danger</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>
+            <div class="badges">
-            <span class="p-tag p-tag-rounded p-tag-success">Success</span>
+                <span class="p-tag p-tag-rounded">Primary</span>
-            <span class="p-tag p-tag-rounded p-tag-info">Info</span>
+                <span class="p-tag p-tag-rounded p-tag-success">Success</span>
-            <span class="p-tag p-tag-rounded p-tag-warning">Warning</span>
+                <span class="p-tag p-tag-rounded p-tag-info">Info</span>
-            <span class="p-tag p-tag-rounded p-tag-danger">Danger</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>
+            <h3>Inline Button Badge</h3>
-            <span class="p-badge" style="font-size: 1em">2</span>
+            <Button type="button" label="Emails" badge="8" />
-            <span class="p-badge p-badge-success" style="font-size: 1.25em">8</span>
+            <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-" />
-            <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>
+            <h3>Sizes</h3>
-            <h2>Heading 2 <span class="p-tag p-tag-success">New</span></h2>
+            <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 {