<template>
  <div class="grid grid-cols-4 gap-3 text-center">
    <div>
      <AisButtonGroup vertical rounded>
        <AisButton>Button 1</AisButton>
        <AisButton>Button 2</AisButton>
        <AisButton>Button 3</AisButton>
      </AisButtonGroup>
      <b>rounded</b>
    </div>
    <div>
      <AisButtonGroup vertical rounded="md">
        <AisButton>Button 1</AisButton>
        <AisButton>Button 2</AisButton>
        <AisButton>Button 3</AisButton>
      </AisButtonGroup>
      <b>rounded-md</b>
    </div>
    <div>
      <AisButtonGroup vertical rounded="lg">
        <AisButton>Button 1</AisButton>
        <AisButton>Button 2</AisButton>
        <AisButton>Button 3</AisButton>
      </AisButtonGroup>
      <b>rounded-lg</b>
    </div>
    <div>
      <AisButtonGroup vertical rounded="full">
        <AisButton>Button 1</AisButton>
        <AisButton>Button 2</AisButton>
        <AisButton>Button 3</AisButton>
      </AisButtonGroup>
      <b>rounded-full</b>
    </div>
  </div>
</template>

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