<template>
  <div class="grid gap-y-8">
    <div class="flex items-end justify-around space-x-4">
      <Example label="xl">
        <AisButton size="xl" variant="secondary" alternate press>X-large</AisButton>
      </Example>

      <Example label="lg">
        <AisButton size="lg" variant="secondary" alternate press>Large</AisButton>
      </Example>

      <Example label="md">
        <AisButton size="md" variant="secondary" alternate press>Medium</AisButton>
      </Example>

      <Example label="sm">
        <AisButton size="sm" variant="secondary" alternate press>Small</AisButton>
      </Example>

      <Example label="xs">
        <AisButton size="xs" variant="secondary" alternate press>X-small</AisButton>
      </Example>
    </div>
  </div>
</template>

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

</script>
