<template>
    <button class="btn-in-table" :class="btnType" :style="btnStyle">
        <Icon :type="icon" class="btn-icon"></Icon>{{text}}</button>
</template>
<script>
export default {
    name: "BtnInTable",
    data() {
        return {};
    },
    mounted: function() {},
    computed: {
        btnType() {
            return ["btn-in-table-" + this.type, "btn-in-table-" + this.size];
        },
        btnStyle() {
            if (this.noborder) {
                return {
                    border: "none!important"
                };
            }
        }
    },
    props: ["type", "icon", "size", "text", "noborder"]
};
</script>
<style scoped>
.btn-in-table {
    border: none;
    cursor: pointer;
    background-color: transparent;
    color: #495060;
    padding: 5px 15px 6px;
    font-size: 12px;
}
.btn-in-table .btn-icon {
    margin-right: 2px;
}
.btn-in-table:hover,
.btn-in-table:active {
}
.btn-in-table-large {
    padding: 6px 15px 6px 15px;
    font-size: 14px;
}
.btn-in-table-large:hover,
.btn-in-table-large:active {
}
.btn-in-table-small {
    padding: 1px 7px 2px;
    font-size: 12px;
}
.btn-in-table-small:hover,
.btn-in-table-small:active {
}
.btn-in-table-default:hover,
.btn-in-table-default:active {
    color: #2db7f5;
}
.btn-in-table-primary:hover,
.btn-in-table-primary:active {
    color: #2db7f5;
}
.btn-in-table-warning:hover,
.btn-in-table-warning:active {
    color: #2db7f5;
}
.btn-in-table-error:hover,
.btn-in-table-error:active {
    color: #2db7f5;
}
.btn-in-table-info:hover,
.btn-in-table-info:active {
    color: #2db7f5;
}
.btn-in-table-success:hover,
.btn-in-table-success:active {
    color: #2db7f5;
}
</style>