Refactor #3965, Improve build and Added *Base models

components/lib/button/BaseButton.vue

@@ -103,16 +103,10 @@ const classes = {
             'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
         }
     ],
-    label: 'p-button-label',
-    badge: ({ props }) => [
-        'p-badge p-component',
-        {
-            'p-badge-no-gutter': props.badge && String(props.badge).length === 1
-        }
-    ]
+    label: 'p-button-label'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_button_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'button', manual: true });
 
 export default {
     name: 'BaseButton',

components/lib/button/Button.css

@@ -1,68 +0,0 @@
-.p-button {
-    margin: 0;
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    align-items: center;
-    vertical-align: bottom;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-button-label {
-    flex: 1 1 auto;
-}
-
-.p-button-icon-right {
-    order: 1;
-}
-
-.p-button:disabled {
-    cursor: default;
-}
-
-.p-button-icon-only {
-    justify-content: center;
-}
-
-.p-button-icon-only .p-button-label {
-    visibility: hidden;
-    width: 0;
-    flex: 0 0 auto;
-}
-
-.p-button-vertical {
-    flex-direction: column;
-}
-
-.p-button-icon-bottom {
-    order: 2;
-}
-
-.p-buttonset .p-button {
-    margin: 0;
-}
-
-.p-buttonset .p-button:not(:last-child) {
-    border-right: 0 none;
-}
-
-.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
-    border-radius: 0;
-}
-
-.p-buttonset .p-button:first-of-type {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.p-buttonset .p-button:last-of-type {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.p-buttonset .p-button:focus {
-    position: relative;
-    z-index: 1;
-}

components/lib/button/Button.vue

@@ -9,7 +9,7 @@
                 <span v-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
             </slot>
             <span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
-            <span v-if="badge" :class="[cx('badge'), badgeClass]" v-bind="ptm('badge')">{{ badge }}</span>
+            <Badge v-if="badge" :value="badge" :class="badgeClass" :unstyled="unstyled" v-bind="ptm('badge')"></Badge>
         </slot>
     </button>
 </template>
@@ -17,6 +17,7 @@
 <script>
 import SpinnerIcon from 'primevue/icons/spinner';
 import Ripple from 'primevue/ripple';
+import Badge from 'primevue/badge';
 import BaseButton from './BaseButton.vue';
 
 export default {
@@ -43,7 +44,8 @@ export default {
         }
     },
     components: {
-        SpinnerIcon
+        SpinnerIcon,
+        Badge
     },
     directives: {
         ripple: Ripple