<template>
  <div class="docs-example grid gap-y-8">
    <div class="flex items-center space-x-4">
      <Example label="Primary">
        <AisBadge variant="primary">Badge</AisBadge>
      </Example>
      <Example label="Secondary">
        <AisBadge variant="secondary">Badge</AisBadge>
      </Example>
      <Example label="Default">
        <AisBadge variant="default">Badge</AisBadge>
      </Example>
      <Example label="Plain">
        <AisBadge variant="plain">Badge</AisBadge>
      </Example>
    </div>
    <div class="flex items-center space-x-4">
      <Example label="Info">
        <AisBadge variant="info">Badge</AisBadge>
      </Example>
      <Example label="Success">
        <AisBadge variant="success">Badge</AisBadge>
      </Example>
      <Example label="Warning">
        <AisBadge variant="warning">Badge</AisBadge>
      </Example>
      <Example label="Danger">
        <AisBadge variant="danger">Badge</AisBadge>
      </Example>
    </div>
  </div>
</template>

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


</script>
