Minha solução para o desafio de criar o componente botão

Olá! Resolvi compartilhar a minha forma de criar o componente Vue AppButton para ser reutilizado na aplicação. Estou aberto a sugestões!

AppButton.vue

<template>
  <button class="button" @click="emitClick" :disabled="isDisabled">
    <span class="icon">
      <i :class="iconClasses"></i>
    </span>
    <span>{{ btnText }}</span>
  </button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'AppButton',
  emits: ['btnClicked'],
  props: {
    isDisabled: {
      type: Boolean,
      default: false
    },
    btnIcon: {
      type: String,
      required: true
    },
    btnText: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      iconClasses: `fas fa-${ this.btnIcon }`
    }
  },
  methods: {
    emitClick(): void {
      this.$emit('btnClicked')
    }
  }
});
</script>

Template de Timer.vue

<template>
  <div class="is-flex is-align-items-center is-justify-content-space-between">
    <Cronometer :timeInSeconds="timeInSeconds" />
    <AppButton :isDisabled="isTimeRunning" :btnIcon="'play'" :btnText="'Start'" @btnClicked="start" />
    <AppButton :isDisabled="!isTimeRunning" :btnIcon="'stop'" :btnText="'Stop'" @btnClicked="stop" />
  </div>
</template>