<template>
  <div class="grid gap-y-8">
    <div class="grid grid-cols-4 gap-4">
      <Example label="rounded">
        <AisButton rounded variant="secondary" alternate>Button</AisButton>
      </Example>

      <Example label="rounded-md">
        <AisButton rounded="md" variant="secondary" alternate>Button</AisButton>
      </Example>

      <Example label="rounded-lg">
        <AisButton rounded="lg" variant="secondary" alternate>Button</AisButton>
      </Example>

      <Example label="rounded-full">
        <AisButton rounded="full" variant="secondary" alternate>Button</AisButton>
      </Example>
    </div>
  </div>
</template>

<script setup>
  import AisButton from '@/components/button/AisButton.vue';
  import Example from "@/components/docs/ComponentExample.vue";

</script>
