Raya Button

<script setup lang="ts">
import { RayaButton } from '@/components/ui/raya-button'
import { Mail, Trash2 } from 'lucide-vue-next'
</script>

<template>
  <div class="flex flex-col gap-8">

    <div class="space-y-3">
      <h3 class="text-xs font-semibold text-zinc-500 uppercase tracking-widest">Primary Color</h3>
      <div class="flex flex-wrap gap-3 items-center">
        <RayaButton color="primary" variant="solid">Solid</RayaButton>
        <RayaButton color="primary" variant="soft">Soft</RayaButton>
        <RayaButton color="primary" variant="subtle">Subtle</RayaButton>
        <RayaButton color="primary" variant="outline">Outline</RayaButton>
        <RayaButton color="primary" variant="ghost">Ghost</RayaButton>
        <RayaButton color="primary" variant="link">Link</RayaButton>
      </div>
    </div>

    <div class="space-y-3">
      <h3 class="text-xs font-semibold text-zinc-500 uppercase tracking-widest">Neutral Color</h3>
      <div class="flex flex-wrap gap-3 items-center">
        <RayaButton color="neutral" variant="solid">Solid</RayaButton>
        <RayaButton color="neutral" variant="soft">Soft</RayaButton>
        <RayaButton color="neutral" variant="subtle">Subtle</RayaButton>
        <RayaButton color="neutral" variant="outline">Outline</RayaButton>
        <RayaButton color="neutral" variant="ghost">Ghost</RayaButton>
        <RayaButton color="neutral" variant="link">Link</RayaButton>
      </div>
    </div>

    <div class="space-y-3">
      <h3 class="text-xs font-semibold text-zinc-500 uppercase tracking-widest">Destructive Color</h3>
      <div class="flex flex-wrap gap-3 items-center">
        <RayaButton color="destructive" variant="solid">
          <Trash2 class="mr-2 h-4 w-4" /> Delete
        </RayaButton>
        <RayaButton color="destructive" variant="soft">Soft</RayaButton>
        <RayaButton color="destructive" variant="outline">Outline</RayaButton>
      </div>
    </div>

    <div class="space-y-3">
      <h3 class="text-xs font-semibold text-zinc-500 uppercase tracking-widest">Sizes & States</h3>
      <div class="flex flex-wrap items-center gap-3">
        <RayaButton size="xs" color="neutral" variant="outline">XS</RayaButton>
        <RayaButton size="sm" color="neutral" variant="outline">SM</RayaButton>
        <RayaButton size="md" color="neutral" variant="outline">MD</RayaButton>
        <RayaButton size="lg" color="neutral" variant="outline">LG</RayaButton>
        <RayaButton size="xl" color="neutral" variant="outline">XL</RayaButton>
        <div class="w-px h-8 bg-zinc-800 mx-2"></div>
        <RayaButton loading color="primary" variant="soft">Loading</RayaButton>
        <RayaButton square variant="outline"><Mail class="h-4 w-4" /></RayaButton>
      </div>
    </div>

  </div>
</template>