<template>
  <div class="docs-example grid gap-y-8">
    <div class="flex items-center space-x-4">
      <Example label="xl">
        <AisBadge size="xl">X-Large</AisBadge>
      </Example>
      <Example label="lg">
        <AisBadge size="lg">Large</AisBadge>
      </Example>
      <Example label="md">
        <AisBadge size="md">Medium</AisBadge>
      </Example>
      <Example label="sm">
        <AisBadge size="sm">Small</AisBadge>
      </Example>
      <Example label="xs">
        <AisBadge size="xs">X-Small</AisBadge>
      </Example>
    </div>
  </div>
</template>

<script setup>
import AisBadge from "@/components/badge/AisBadge.vue";
import Example from "@/components/docs/ComponentExample.vue"


</script>