removed rounded full from button
This commit is contained in:
@@ -1,45 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
// types
|
||||
type Props = {
|
||||
variant?: "solid" | "secondary" | "outlined" | "ghost"
|
||||
size?: "xl" | "lg" | "md",
|
||||
variant?: "solid" | "secondary" | "outlined" | "ghost";
|
||||
size?: "xl" | "lg" | "md";
|
||||
startIcon?: string;
|
||||
endIcon?: string;
|
||||
}
|
||||
};
|
||||
|
||||
// props
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
variant: "solid",
|
||||
size: "lg"
|
||||
size: "lg",
|
||||
});
|
||||
const { variant, size } = toRefs(props);
|
||||
|
||||
// computed
|
||||
const classes = computed(() => {
|
||||
return [
|
||||
"rounded-full flex items-center justify-center transition-all cursor-pointer",
|
||||
"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-ghost": variant.value === "ghost",
|
||||
},
|
||||
{
|
||||
"btn-xl": size.value === "xl",
|
||||
"btn-lg": size.value === "lg",
|
||||
"btn-md": size.value === "md"
|
||||
}
|
||||
"btn-md": size.value === "md",
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button :class="classes">
|
||||
<Icon v-if="startIcon" :name="startIcon" class="ms-0" />
|
||||
<Icon v-if="startIcon" :name="startIcon" />
|
||||
<slot />
|
||||
<Icon v-if="endIcon" :name="endIcon" class="me-0" />
|
||||
<Icon v-if="endIcon" :name="endIcon" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user