Mamalizz
43 lines
1.0 KiB
Vue
43 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
type Props = {
|
|
variant?: "solid" | "secondary" | "outlined" | "ghost";
|
|
size?: "xl" | "lg" | "md";
|
|
startIcon?: string;
|
|
endIcon?: string;
|
|
};
|
|
|
|
// props
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: "solid",
|
|
size: "lg",
|
|
});
|
|
const { variant, size } = toRefs(props);
|
|
|
|
// computed
|
|
const classes = computed(() => {
|
|
return [
|
|
"flex items-center justify-center transition-all cursor-pointer",
|
|
{
|
|
"btn-solid": variant.value === "solid",
|
|
"btn-secondary": variant.value === "secondary",
|
|
"btn-outlined": variant.value === "outlined",
|
|
"btn-ghost": variant.value === "ghost",
|
|
},
|
|
{
|
|
"btn-xl": size.value === "xl",
|
|
"btn-lg": size.value === "lg",
|
|
"btn-md": size.value === "md",
|
|
},
|
|
];
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<button :class="classes">
|
|
<Icon v-if="startIcon" :name="startIcon" />
|
|
<slot />
|
|
<Icon v-if="endIcon" :name="endIcon" />
|
|
</button>
|
|
</template>
|