Badge

<.badge>New</.badge>
<.badge color="warning">In Progress</.badge>
<.badge color="success">Completed</.badge>
<.badge color="info">Verified</.badge>
<.badge color="danger">Urgent</.badge>

<.badge variant="solid" color="info">Solid</.badge>
<.badge variant="soft" color="info">Soft</.badge>
<.badge variant="surface" color="info">Surface</.badge>
<.badge variant="outline" color="info">Outline</.badge>
<.badge variant="dashed" color="info">Dashed</.badge>
<.badge variant="ghost" color="info">Ghost</.badge>

<!-- Primary -->
<.badge color="primary">Primary</.badge>
<.badge variant="solid" color="primary">Primary Solid</.badge>
<.badge variant="soft" color="primary">Primary Soft</.badge>
<.badge variant="surface" color="primary">Primary Surface</.badge>
<.badge variant="outline" color="primary">Primary Outline</.badge>
<.badge variant="dashed" color="primary">Primary Dashed</.badge>
<.badge variant="ghost" color="primary">Primary Ghost</.badge>

<!-- Info -->
<.badge color="info">Info</.badge>
<.badge variant="solid" color="info">Info Solid</.badge>
<.badge variant="soft" color="info">Info Soft</.badge>
<.badge variant="surface" color="info">Info Surface</.badge>
<.badge variant="outline" color="info">Info Outline</.badge>
<.badge variant="dashed" color="info">Info Dashed</.badge>
<.badge variant="ghost" color="info">Info Ghost</.badge>

<!-- Success -->
<.badge color="success">Success</.badge>
<.badge variant="solid" color="success">Success Solid</.badge>
<.badge variant="soft" color="success">Success Soft</.badge>
<.badge variant="surface" color="success">Success Surface</.badge>
<.badge variant="outline" color="success">Success Outline</.badge>
<.badge variant="dashed" color="success">Success Dashed</.badge>
<.badge variant="ghost" color="success">Success Ghost</.badge>

<!-- Warning -->
<.badge color="warning">Warning</.badge>
<.badge variant="solid" color="warning">Warning Solid</.badge>
<.badge variant="soft" color="warning">Warning Soft</.badge>
<.badge variant="surface" color="warning">Warning Surface</.badge>
<.badge variant="outline" color="warning">Warning Outline</.badge>
<.badge variant="dashed" color="warning">Warning Dashed</.badge>
<.badge variant="ghost" color="warning">Warning Ghost</.badge>

<!-- Danger -->
<.badge color="danger">Danger</.badge>
<.badge variant="solid" color="danger">Danger Solid</.badge>
<.badge variant="soft" color="danger">Danger Soft</.badge>
<.badge variant="surface" color="danger">Danger Surface</.badge>
<.badge variant="outline" color="danger">Danger Outline</.badge>
<.badge variant="dashed" color="danger">Danger Dashed</.badge>
<.badge variant="ghost" color="danger">Danger Ghost</.badge>

<.badge size="xs">XS</.badge>
<.badge size="sm">SM</.badge>
<.badge size="md">MD</.badge>
<.badge size="lg">LG</.badge>
<.badge size="xl">XL</.badge>

<.badge color="success">
  <.icon name="hero-check-circle" class="icon" /> Verified
</.badge>

<.badge color="warning">
  <.icon name="hero-exclamation-triangle" class="icon" /> Warning
</.badge>

<.badge color="danger">
  <.icon name="hero-x-circle" class="icon" /> Error
</.badge>

<.badge color="info">
  <.icon name="hero-information-circle" class="icon" /> Info
</.badge>

<.badge color="success">
  <span class="size-1.5 rounded-full bg-current/70"></span>
  Online
</.badge>

<.badge color="danger">
  <span class="size-1.5 rounded-full bg-current/70"></span>
  Offline
</.badge>

<.badge color="warning">
  <span class="size-1.5 rounded-full bg-current/70"></span>
  Pending
</.badge>

<.badge class="rounded-full px-1.5" color="primary">Pill Badge</.badge>
<.badge class="font-mono" color="info">MONO-123</.badge>
<.badge class="uppercase tracking-wide" color="success">Status</.badge>