<template>
  <div class="grid gap-y-8">
    <div class="flex items-end justify-around">
      <Example label="caps">
        <AisButton font="caps" variant="secondary" icon="save" press>Caps</AisButton>
      </Example>

      <Example label="serif">
        <AisButton font="serif" variant="secondary" icon="save" press>Serif</AisButton>
      </Example>

      <Example label="sans">
        <AisButton font="sans" variant="secondary" icon="save" press>Sans Button</AisButton>
      </Example>
    </div>
    <div class="flex items-end justify-around">
      <Example label="caps">
        <AisButton font="caps" variant="secondary" icon="save" alternate press>Caps</AisButton>
      </Example>

      <Example label="serif">
        <AisButton font="serif" variant="secondary" icon="save" alternate press>Serif</AisButton>
      </Example>

      <Example label="sans">
        <AisButton font="sans" variant="secondary" icon="save" alternate press>Sans Button</AisButton>
      </Example>
    </div>

  </div>
</template>

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

</script>
