Files
Piped/src/components/ui/Button.vue

37 lines
932 B
Vue

<template>
<button
:type="type"
:class="[
'inline-block w-auto cursor-pointer rounded-sm py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:text-gray-400 dark:hover:bg-dark-300',
variant === 'primary' ? 'bg-gray-300 dark:bg-dark-400' : 'bg-gray-300 dark:bg-dark-400',
customClass,
]"
v-bind="$attrs"
>
<slot />
</button>
</template>
<script setup>
defineOptions({
name: "UiButton",
});
defineProps({
type: {
type: String,
default: "button",
validator: val => ["button", "submit"].includes(val),
},
variant: {
type: String,
default: "primary",
validator: val => ["primary", "secondary"].includes(val),
},
customClass: {
type: String,
default: "",
},
});
</script>