<template>
  <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>
  </button>
</template>

<script setup lang="ts">
defineProps({
  label: { type: String, required: true },
  icon: { type: String, default: null },
  short: { type: Boolean, default: false },
})
</script>

<style scoped lang="sass">
.button.short
  margin: calc(1px - 0.5em) -1em
</style>
