Updated button badges

components/lib/button/BaseButton.vue

@@ -32,7 +32,7 @@ export default {
         },
         badgeSeverity: {
             type: String,
-            default: null
+            default: 'secondary'
         },
         loading: {
             type: Boolean,

components/lib/button/style/ButtonStyle.js

@@ -16,7 +16,8 @@ const theme = ({ dt }) => `
     font-size: 1rem;
     font-family: inherit;
     font-feature-settings: inherit;
-    transition: background ${dt('button.transition.duration')}, color ${dt('button.transition.duration')}, border-color ${dt('button.transition.duration')}, outline-color ${dt('button.transition.duration')}, box-shadow ${dt('button.transition.duration')};
+    transition: background ${dt('button.transition.duration')}, color ${dt('button.transition.duration')}, border-color ${dt('button.transition.duration')}, 
+            outline-color ${dt('button.transition.duration')}, box-shadow ${dt('button.transition.duration')};
     border-radius: ${dt('button.border.radius')};
     outline-color: transparent;
     gap: ${dt('button.gap')};
@@ -99,11 +100,9 @@ const theme = ({ dt }) => `
 }
 
 .p-button .p-badge {
-    min-width: 1rem;
+    min-width: ${dt('button.badge.size')};
-    height: 1rem;
+    height: ${dt('button.badge.size')};
-    line-height: 1rem;
+    line-height: ${dt('button.badge.size')};
-    background: ${dt('button.primary.color')};
-    color: ${dt('button.primary.background')};
 }
 
 .p-button-raised {

components/lib/themes/aura/button/index.js

@@ -25,6 +25,7 @@ export default {
             style: '{focus.ring.style}',
             offset: '{focus.ring.offset}'
         },
+        badgeSize: '1rem',
         transitionDuration: '{form.field.transition.duration}'
     },
     colorScheme: {

components/lib/themes/lara/button/index.js

@@ -25,6 +25,7 @@ export default {
             style: '{form.field.focus.ring.style}',
             offset: '{form.field.focus.ring.offset}'
         },
+        badgeSize: '1rem',
         transitionDuration: '{form.field.transition.duration}'
     },
     colorScheme: {

components/lib/themes/nora/button/index.js

@@ -25,6 +25,7 @@ export default {
             style: '{focus.ring.style}',
             offset: '{focus.ring.offset}'
         },
+        badgeSize: '1rem',
         transitionDuration: '{form.field.transition.duration}'
     },
     colorScheme: {

doc/badge/ButtonDoc.vue

@@ -2,9 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>Buttons have built-in support for badges to display a badge inline.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-2">
+    <div class="card flex justify-center flex-wrap gap-4">
-        <Button type="button" label="Emails" badge="8" />
+        <Button type="button" label="Notifications" icon="pi pi-bell" badge="2" />
-        <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
+        <Button type="button" label="Inbox" icon="pi pi-inbox" badge="2" badgeSeverity="contrast" outlined />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,14 +15,14 @@ export default {
         return {
             code: {
                 basic: `
-<Button type="button" label="Emails" badge="8" />
+<Button type="button" label="Notifications" icon="pi pi-bell" badge="2" />
-<Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
+<Button type="button" label="Inbox" icon="pi pi-inbox" badge="2" badgeSeverity="contrast" outlined />
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-center gap-2">
+    <div class="card flex justify-center flex-wrap gap-4">
-        <Button type="button" label="Emails" badge="8" />
+        <Button type="button" label="Notifications" icon="pi pi-bell" badge="2" />
-        <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
+        <Button type="button" label="Inbox" icon="pi pi-inbox" badge="2" badgeSeverity="contrast" outlined />
     </div>
 </template>
 
@@ -31,9 +31,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap justify-center gap-2">
+    <div class="card flex justify-center flex-wrap gap-4">
-        <Button type="button" label="Emails" badge="8" />
+        <Button type="button" label="Notifications" icon="pi pi-bell" badge="2" />
-        <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
+        <Button type="button" label="Inbox" icon="pi pi-inbox" badge="2" badgeSeverity="contrast" outlined />
     </div>
 </template>
 

pages/button/index.vue

@@ -12,7 +12,7 @@
 
 <script>
 import AccessibilityDoc from '@/doc/button/AccessibilityDoc.vue';
-import BadgesDoc from '@/doc/button/BadgesDoc.vue';
+import BadgeDoc from '@/doc/button/BadgeDoc.vue';
 import BasicDoc from '@/doc/button/BasicDoc.vue';
 import ButtonGroupDoc from '@/doc/button/ButtonGroupDoc.vue';
 import DisabledDoc from '@/doc/button/DisabledDoc.vue';
@@ -102,9 +102,9 @@ export default {
                     component: IconOnlyDoc
                 },
                 {
-                    id: 'badges',
+                    id: 'badge',
-                    label: 'Badges',
+                    label: 'Badge',
-                    component: BadgesDoc
+                    component: BadgeDoc
                 },
                 {
                     id: 'buttongroup',