exchange-2.0/stories/Button.vue

<template>
    <button type="button" :class="classes" @click="onClick" :style="style">
        {{ label }}
    </button>
</template>

<script>
import "./button.css";

export default {
    name: "my-button",

    props: {
        label: {
            type: String,
            required: true,
        },
        primary: {
            type: Boolean,
            default: false,
        },
        border: {
            type: Boolean,
            default: false,
        },
        size: {
            type: String,
            default: "sm",
            validator: function (value) {
                return ["xs", "sm", "lg"].indexOf(value) !== -1;
            },
        },
        backgroundColor: {
            type: String,
        },
    },

    computed: {
        classes() {
            return {
                "btn btn-block": true,
                "btn-primary": this.primary,
                "btn-secondary": !this.primary,
                "b-rad-none": true,
                // "b-rad-none": !this.border,
                [`btn-${this.size}`]: true,
            };
        },
        style() {
            return {
                backgroundColor: this.backgroundColor,
            };
        },
    },

    methods: {
        onClick() {
            this.$emit("onClick");
        },
    },
};
</script>