<template>
  <div class="button-group">
    <MyButton variant="primary"
              size="sm">
      Primary Small
    </MyButton>
    <MyButton>
      Primary Medium
    </MyButton>
    <MyButton variant="secondary">
      Secondary Medium
    </MyButton>
    <MyButton variant="danger"
              size="lg">
      Danger Large
    </MyButton>

    <MyButton variant="danger"
              size="lg"
              :loading="true">
      Danger Large
    </MyButton>

    <MyButton variant="danger"
              size="lg"
              :disabled="true">
      Danger Large
    </MyButton>
  </div>
  <div class="button-group">
    <MyButton variant="danger"
              size="lg"
              :fullwidth="true">
      Danger Fullwidth
    </MyButton>
  </div>
</template>

<script setup lang="ts">
import MyButton from './components/MyButton.vue';

</script>

<style scoped>
.button-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-start: 1rem;
}
</style>
