cineclub-site/front/components/buttonIcon.vue

24 lines
521 B
Vue
Raw Normal View History

2022-07-11 01:24:47 +02:00
<template>
2022-07-22 00:48:54 +02:00
<button class="button" :class="{ short }" :aria-label="label">
<v-icon
:name="icon"
:class="short ? '' : 'mr-2'"
:scale="short ? 1 : 0.83"
/>
<template v-if="!short">{{ label }}</template>
2022-07-11 01:24:47 +02:00
</button>
</template>
<script setup lang="ts">
defineProps({
label: { type: String, required: true },
icon: { type: String, default: null },
2022-07-22 00:48:54 +02:00
short: { type: Boolean, default: false },
2022-07-11 01:24:47 +02:00
})
</script>
2022-07-22 00:48:54 +02:00
<style scoped lang="sass">
.button.short
margin: calc(1px - 0.5em) -1em
</style>