49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { ButtonVariant } from '#layers/types/components/button'
|
|
|
|
interface props {
|
|
variant?: ButtonVariant
|
|
disabled?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<props>(), {
|
|
variant: 'filled',
|
|
disabled: false,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="btn-base"
|
|
:data-variant="props.variant"
|
|
:disabled="props.disabled"
|
|
>
|
|
<slot />
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.btn-base {
|
|
@apply relative inline-flex items-center justify-center w-full py-[14px] px-5 text-sm font-medium rounded-lg
|
|
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-black/10 before:rounded-lg before:transition-all before:duration-300 before:ease-in-out;
|
|
}
|
|
|
|
.btn-base[data-variant='filled'] {
|
|
@apply bg-[var(--primary)] text-[var(--text-secondary)]
|
|
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-lg after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
|
|
hover:after:opacity-20;
|
|
}
|
|
|
|
.btn-base[data-variant='outlined'] {
|
|
@apply bg-white text-[#333333]
|
|
hover:before:border-[#999];
|
|
}
|
|
|
|
.btn-base:disabled {
|
|
@apply cursor-default bg-[#EBEBEB] text-[#999]
|
|
before:border-[#D9D9D9]
|
|
after:hidden
|
|
hover:before:border-[#D9D9D9];
|
|
}
|
|
</style>
|