explorer-app/components/Button.vue

38 lines
752 B
Vue
Raw Permalink Normal View History

2023-12-19 18:43:42 +01:00
<script setup lang="ts">
defineProps<{
border?: boolean
2024-09-12 18:03:06 +02:00
invertedColor?: boolean
2023-12-19 18:43:42 +01:00
}>()
</script>
<template>
<div
flex
items-center
2024-09-12 18:03:06 +02:00
justify-center
gap-12px
px-12px
py-6px
cursor-pointer
2024-09-12 18:03:06 +02:00
:class="[border ? 'border-2px border-app-white' : 'border-0',
invertedColor ? 'bg-app-white text-app-black hover:text-app-white hover:bg-app-black' : 'text-app-white bg-app-black hover:text-app-black hover:bg-app-white',
]"
>
2023-12-19 18:43:42 +01:00
<template v-if="!!$slots.prefix">
<div text-24px>
<slot
v-if="!!$slots.prefix"
name="prefix"
/>
2023-12-19 18:43:42 +01:00
</div>
</template>
<div
text="14px"
leading-32px
font-700
>
2023-12-19 18:43:42 +01:00
<slot />
</div>
</div>
</template>