Badge

<span x-data="badge()" x-bind="badgeAttrs">Badge</span>

<span x-data="badge({ variant: 'secondary' })" x-bind="badgeAttrs">Secondary</span>

<span x-data="badge({ variant: 'destructive' })" x-bind="badgeAttrs">Destructive</span>

<span x-data="badge({ variant: 'outline' })" x-bind="badgeAttrs">Outline</span>

<span x-data="badge({ variant: 'ghost' })" x-bind="badgeAttrs">Ghost</span>

<span x-data="badge()" x-bind="badgeAttrs">
  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
  Verified
</span>
<span x-data="badge({ variant: 'secondary' })" x-bind="badgeAttrs">
  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
  Bookmark
</span>

<a href="#" class="no-underline">
  <span x-data="badge({ variant: 'outline' })" x-bind="badgeAttrs">
    Open Link
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
  </span>
</a>

<span x-data="badge({ class: 'bg-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-500/20' })" x-bind="badgeAttrs">Blue</span>
<span x-data="badge({ class: 'bg-green-500/10 text-green-600 dark:text-green-400 hover:bg-green-500/20' })" x-bind="badgeAttrs">Green</span>
<span x-data="badge({ class: 'bg-purple-500/10 text-purple-600 dark:text-purple-400 hover:bg-purple-500/20' })" x-bind="badgeAttrs">Purple</span>
<span x-data="badge({ class: 'bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20' })" x-bind="badgeAttrs">Red</span>