Badge Base

<div class="ws-badge mx-auto max-w-lg space-y-8 py-8">
  <!-- Filled Badges -->
  <div>
    <p class="mb-3 text-xs font-medium uppercase tracking-wider text-[var(--ws-badge-text)]/50">Filled</p>
    <div class="flex flex-wrap items-center gap-2">
      <span class="inline-flex items-center rounded-full bg-slate-900 px-3 py-1 text-xs font-medium text-white">Default</span> <!-- ws-ok -->
      <span class="inline-flex items-center rounded-full bg-indigo-600 px-3 py-1 text-xs font-medium text-white">Feature</span>
      <span class="inline-flex items-center rounded-full bg-emerald-600 px-3 py-1 text-xs font-medium text-white">New</span>
      <span class="inline-flex items-center rounded-full bg-amber-500 px-3 py-1 text-xs font-medium text-white">Beta</span>
      <span class="inline-flex items-center rounded-full bg-rose-600 px-3 py-1 text-xs font-medium text-white">Removed</span>
    </div>
  </div>

  <!-- Soft / Tinted Badges -->
  <div>
    <p class="mb-3 text-xs font-medium uppercase tracking-wider text-[var(--ws-badge-text)]/50">Soft</p>
    <div class="flex flex-wrap items-center gap-2">
      <span class="inline-flex items-center rounded-full border border-[var(--ws-badge-border)] bg-[var(--ws-badge-bg)] px-3 py-1 text-xs font-medium text-[var(--ws-badge-text)]">Neutral</span>
      <span class="inline-flex items-center rounded-full bg-indigo-50 px-3 py-1 text-xs font-medium text-indigo-700">In Progress</span>
      <span class="inline-flex items-center rounded-full bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700">Active</span>
      <span class="inline-flex items-center rounded-full bg-amber-50 px-3 py-1 text-xs font-medium text-amber-700">Pending</span>
      <span class="inline-flex items-center rounded-full bg-rose-50 px-3 py-1 text-xs font-medium text-rose-700">Error</span>
    </div>
  </div>

  <!-- Outline Badges -->
  <div>
    <p class="mb-3 text-xs font-medium uppercase tracking-wider text-[var(--ws-badge-text)]/50">Outline</p>
    <div class="flex flex-wrap items-center gap-2">
      <span class="inline-flex items-center rounded-full border border-slate-300 px-3 py-1 text-xs font-medium text-slate-600">Draft</span>
      <span class="inline-flex items-center rounded-full border border-indigo-300 px-3 py-1 text-xs font-medium text-indigo-600">Review</span>
      <span class="inline-flex items-center rounded-full border border-emerald-300 px-3 py-1 text-xs font-medium text-emerald-600">Published</span>
    </div>
  </div>

  <!-- With Icons & Dots -->
  <div>
    <p class="mb-3 text-xs font-medium uppercase tracking-wider text-[var(--ws-badge-text)]/50">With indicators</p>
    <div class="flex flex-wrap items-center gap-2">
      <span class="inline-flex items-center rounded-full bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700">
        <svg class="mr-1.5 h-2 w-2" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="3"/></svg>
        Online
      </span>
      <span class="inline-flex items-center rounded-full bg-rose-50 px-3 py-1 text-xs font-medium text-rose-700">
        <svg class="mr-1.5 h-2 w-2" fill="currentColor" viewBox="0 0 8 8" aria-hidden="true"><circle cx="4" cy="4" r="3"/></svg>
        Offline
      </span>
      <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-3 py-1 text-xs font-medium text-indigo-700">
        <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
        Verified
      </span>
      <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 pl-3 pr-1.5 py-0.5 text-xs font-medium text-amber-700">
        Removable
        <button type="button" class="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-amber-200/60 transition" aria-label="Remove">
          <svg class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
      </span>
    </div>
  </div>

  <!-- Sizes -->
  <div>
    <p class="mb-3 text-xs font-medium uppercase tracking-wider text-[var(--ws-badge-text)]/50">Sizes</p>
    <div class="flex flex-wrap items-center gap-2">
      <span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-600">Tiny</span>
      <span class="inline-flex items-center rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600">Default</span>
      <span class="inline-flex items-center rounded-full bg-slate-100 px-4 py-1.5 text-sm font-medium text-slate-600">Large</span>
    </div>
  </div>
</div>