18 lines
1005 B
Vue
18 lines
1005 B
Vue
<template>
|
|
<button :disabled="disabled" class="text-light-100 dark:text-dark-100 font-semibold hover:bg-light-30 dark:hover:bg-dark-30 inline-flex items-center justify-center bg-light-25 dark:bg-dark-25 leading-none outline-none
|
|
border border-light-25 dark:border-dark-25 hover:border-light-30 dark:hover:border-dark-30 active:border-light-40 dark:active:border-dark-40 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
|
|
disabled:bg-light-10 dark:disabled:bg-dark-10 disabled:border-none disabled:text-light-50 dark:disabled:text-dark-50"
|
|
:class="{'p-1': loading || icon, 'h-[35px] px-[15px]': !loading && !icon}" @click="!loading && emit('click')">
|
|
<Loading v-if="loading" />
|
|
<slot v-else />
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { icon = false, loading = false, disabled = false } = defineProps<{
|
|
icon?: boolean
|
|
loading?: boolean
|
|
disabled?: boolean
|
|
}>();
|
|
const emit = defineEmits(['click']);
|
|
</script> |