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