Styles imported. Components added

components/button/Button.vue

@@ -0,0 +1,84 @@
+<template>
+    <button :class="buttonClass" type="button" :aria-label="defaultAriaLabel" v-ripple :disabled="disabled">
+        <slot>
+            <span v-if="loading && !icon" :class="iconClass"></span>
+            <span v-if="icon" :class="iconClass"></span>
+            <span class="p-button-label">{{label||'&nbsp;'}}</span>
+            <span v-if="badge" :class="badgeStyleClass">{{badge}}</span>
+        </slot>
+    </button>
+</template>
+
+<script>
+import Ripple from 'primevue/ripple';
+
+export default {
+    name: 'Button',
+    props: {
+        label: {
+            type: String
+        },
+        icon: {
+            type: String
+        },
+        iconPos: {
+            type: String,
+            default: 'left'
+        },
+        badge: {
+            type: String
+        },
+        badgeClass: {
+            type: String,
+            default: null
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        loadingIcon: {
+            type: String,
+            default: 'pi pi-spinner pi-spin'
+        }
+    },
+    computed: {
+        buttonClass() {
+            return {
+                'p-button p-component': true,
+                'p-button-icon-only': this.icon && !this.label,
+                'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
+                'p-disabled': this.$attrs.disabled || this.loading,
+                'p-button-loading': this.loading,
+                'p-button-loading-label-only': this.loading && !this.icon && this.label
+            }
+        },
+        iconClass() {
+            return [
+                this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
+                'p-button-icon',
+                {
+                    'p-button-icon-left': this.iconPos === 'left' && this.label,
+                    'p-button-icon-right': this.iconPos === 'right' && this.label,
+                    'p-button-icon-top': this.iconPos === 'top' && this.label,
+                    'p-button-icon-bottom': this.iconPos === 'bottom' && this.label
+                }
+            ]
+        },
+        badgeStyleClass() {
+            return [
+                'p-badge p-component', this.badgeClass, {
+                'p-badge-no-gutter': this.badge && String(this.badge).length === 1
+            }]
+        },
+        disabled() {
+            return this.$attrs.disabled || this.loading;
+        },
+        defaultAriaLabel() {
+            return (this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label']);
+        }
+    },
+    directives: {
+        'ripple': Ripple
+    }
+}
+</script>