<template>
  <div class="grid gap-y-8">
    <div class="grid grid-cols-4 gap-4">
      <Example label="Primary">
        <AisButton variant="primary" disabled>Disabled</AisButton>
      </Example>

      <Example label="Secondary">
        <AisButton variant="secondary" disabled>Disabled</AisButton>
      </Example>

      <Example label="Default">
        <AisButton variant="default" disabled>Disabled</AisButton>
      </Example>

      <Example label="Plain">
        <AisButton variant="plain" disabled>Disabled</AisButton>
      </Example>
    </div>
    <div class="grid grid-cols-4 gap-4">
      <Example label="Primary">
        <AisButton variant="primary" alternate disabled>Disabled</AisButton>
      </Example>

      <Example label="Secondary">
        <AisButton variant="secondary" alternate disabled>Disabled</AisButton>
      </Example>

      <Example label="Default">
        <AisButton variant="default" alternate disabled>Disabled</AisButton>
      </Example>

      <Example label="Plain">
        <AisButton variant="plain" alternate disabled>Disabled</AisButton>
      </Example>
    </div>
  </div>
</template>

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

</script>
