<template>
  <div class="space-y-3">
    <div>
      <AisButtonGroup size="xs">
        <AisButton>X-Small 1</AisButton>
        <AisButton>X-Small 2</AisButton>
        <AisButton>X-Small 3</AisButton>
      </AisButtonGroup>
    </div>
    <div>
      <AisButtonGroup size="sm">
        <AisButton>Small 1</AisButton>
        <AisButton>Small 2</AisButton>
        <AisButton>Small 3</AisButton>
      </AisButtonGroup>
    </div>
    <div>
      <AisButtonGroup size="md">
        <AisButton>Medium 1</AisButton>
        <AisButton>Medium 2</AisButton>
        <AisButton>Medium 3</AisButton>
      </AisButtonGroup>
    </div>
    <div>
      <AisButtonGroup>
        <AisButton>Default 1</AisButton>
        <AisButton>Default 2</AisButton>
        <AisButton>Default 3</AisButton>
      </AisButtonGroup>
    </div>
    <div>
      <AisButtonGroup size="xl">
        <AisButton>X-Large 1</AisButton>
        <AisButton>X-Large 2</AisButton>
        <AisButton>X-Large 3</AisButton>
      </AisButtonGroup>
    </div>
  </div>
</template>

<script setup>
  import AisButtonGroup from '@/components/button-group/AisButtonGroup.vue'
  import AisButton from '@/components/button/AisButton.vue'
</script>
