53 lines
929 B
Vue
53 lines
929 B
Vue
<template>
|
|
<button type="button" class="flex items-center justify-center cursor-pointer"
|
|
:disabled="disabled" :class="buttonClasses" @click="handleClick">
|
|
<slot></slot>
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
color: {
|
|
type: String,
|
|
default: "transparent",
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
}
|
|
},
|
|
computed: {
|
|
buttonClasses() {
|
|
return {
|
|
"transparent": this.color === "transparent",
|
|
};
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick($ev) {
|
|
if (this.disabled) {
|
|
$ev.stopPropagation();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.transparent {
|
|
background: transparent;
|
|
padding: 1rem;
|
|
border: 1px solid $color-button;
|
|
border-radius: 12px;
|
|
color: $color-button;
|
|
width: fit-content;
|
|
text-transform: uppercase;
|
|
&:hover {
|
|
background: $color-button;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
</style> |