Filter Chip

<div class="filter-chips">
  <button class="filter-chip filter-chip-active">All</button>
  <button class="filter-chip">Active</button>
  <button class="filter-chip">Completed</button>
  <button class="filter-chip">Archived</button>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-2">
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium bg-primary text-primary-content rounded-full">All</button>
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium text-base-content/60 bg-base-content/5 border border-base-300 rounded-full hover:bg-base-300">Active</button>
  <!-- more chips... -->
</div>

Requires: tw.min.css

// Toggle: chip.classList.toggle('filter-chip-active');
// Or use data-state: chip.dataset.state = chip.dataset.state === 'active' ? '' : 'active';

<div class="filter-chips">
  <button class="filter-chip filter-chip-active">
    <svg class="filter-chip-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
    Status
    <span class="filter-chip-count">3</span>
  </button>
  <button class="filter-chip">
    Priority
    <span class="filter-chip-count">12</span>
  </button>
  <button class="filter-chip filter-chip-active">
    Labels
    <button class="filter-chip-remove"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
  </button>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-2">
  <button class="inline-flex items-center gap-2 h-8 px-3 text-[0.8125rem] font-medium bg-primary text-primary-content border border-primary rounded-full">
    <svg class="shrink-0 size-4 opacity-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
    Status
    <span class="inline-flex items-center justify-center min-w-4.5 h-4.5 px-1.5 text-[0.6875rem] font-bold bg-white/25 rounded-full ml-1">3</span>
  </button>
  <button class="inline-flex items-center gap-2 h-8 px-3 text-[0.8125rem] font-medium text-base-content/60 bg-base-content/5 border border-base-300 rounded-full hover:bg-base-300 hover:text-base-content">
    Priority
    <span class="inline-flex items-center justify-center min-w-4.5 h-4.5 px-1.5 text-[0.6875rem] font-bold bg-black/10 rounded-full ml-1">12</span>
  </button>
  <button class="inline-flex items-center gap-2 h-8 px-3 text-[0.8125rem] font-medium bg-primary text-primary-content border border-primary rounded-full">
    Labels
    <span class="inline-flex items-center justify-center size-4.5 bg-white/25 rounded-full ml-1 -mr-1 cursor-pointer hover:bg-white/40"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-3"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
  </button>
</div>

Requires: tw.min.css

// Remove: chip.remove(); or chip.classList.remove('filter-chip-active');

<!-- Outline -->
<div class="filter-chips mb-4">
  <button class="filter-chip filter-chip-outline">Outline</button>
  <button class="filter-chip filter-chip-outline filter-chip-active">Active Outline</button>
</div>

<!-- Soft -->
<div class="filter-chips mb-4">
  <button class="filter-chip filter-chip-soft filter-chip-active">Soft Active</button>
  <button class="filter-chip filter-chip-soft">Soft</button>
</div>

<!-- Sizes -->
<div class="filter-chips items-end">
  <button class="filter-chip filter-chip-sm">Small</button>
  <button class="filter-chip">Default</button>
  <button class="filter-chip filter-chip-lg">Large</button>
</div>

Requires: ux.min.css

<!-- Outline -->
<div class="flex flex-wrap gap-2 mb-4">
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium text-base-content/60 bg-transparent border border-base-300 rounded-full hover:bg-base-content/5">Outline</button>
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium text-primary bg-transparent border border-primary rounded-full">Active Outline</button>
</div>

<!-- Soft -->
<div class="flex flex-wrap gap-2 mb-4">
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium text-primary bg-primary/10 border border-primary/20 rounded-full">Soft Active</button>
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium text-base-content/60 bg-base-content/5 border border-base-300 rounded-full hover:bg-base-300 hover:text-base-content">Soft</button>
</div>

<!-- Sizes -->
<div class="flex flex-wrap gap-2 items-end">
  <button class="inline-flex items-center h-6.5 px-2 text-xs font-medium text-base-content/60 bg-base-content/5 border border-base-300 rounded-full hover:bg-base-300">Small</button>
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium text-base-content/60 bg-base-content/5 border border-base-300 rounded-full hover:bg-base-300">Default</button>
  <button class="inline-flex items-center h-10 px-4 text-[0.9375rem] font-medium text-base-content/60 bg-base-content/5 border border-base-300 rounded-full hover:bg-base-300">Large</button>
</div>

Requires: tw.min.css

// No JavaScript required for static variants

<div class="filter-chips filter-chips-scroll">
  <span class="filter-chips-label">Filter:</span>
  <button class="filter-chip filter-chip-active">All</button>
  <button class="filter-chip">Electronics</button>
  <button class="filter-chip">Clothing</button>
  <button class="filter-chip">Books</button>
  <button class="filter-chip">Sports</button>
  <button class="filter-chip">Home</button>
  <button class="filter-chip">Toys</button>
  <div class="filter-chips-divider"></div>
  <button class="filter-chips-clear">Clear all</button>
</div>

Requires: ux.min.css

<div class="flex flex-nowrap items-center gap-2 overflow-x-auto scrollbar-hide pb-2">
  <span class="text-xs font-semibold uppercase text-base-content/40 tracking-wide mr-2">Filter:</span>
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium bg-primary text-primary-content border border-primary rounded-full shrink-0">All</button>
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium text-base-content/60 bg-base-content/5 border border-base-300 rounded-full shrink-0 hover:bg-base-300">Electronics</button>
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium text-base-content/60 bg-base-content/5 border border-base-300 rounded-full shrink-0 hover:bg-base-300">Clothing</button>
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium text-base-content/60 bg-base-content/5 border border-base-300 rounded-full shrink-0 hover:bg-base-300">Books</button>
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium text-base-content/60 bg-base-content/5 border border-base-300 rounded-full shrink-0 hover:bg-base-300">Sports</button>
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium text-base-content/60 bg-base-content/5 border border-base-300 rounded-full shrink-0 hover:bg-base-300">Home</button>
  <button class="inline-flex items-center h-8 px-3 text-[0.8125rem] font-medium text-base-content/60 bg-base-content/5 border border-base-300 rounded-full shrink-0 hover:bg-base-300">Toys</button>
  <div class="w-px h-6 bg-base-300 mx-1 shrink-0"></div>
  <button class="bg-transparent border-none text-[0.8125rem] text-error cursor-pointer px-2 shrink-0 hover:opacity-70">Clear all</button>
</div>

Requires: tw.min.css

// Clear all: document.querySelectorAll('.filter-chip-active').forEach(c => c.classList.remove('filter-chip-active'));