Badges — Removable filter chips

Active filters appear as wrapping chips with individual remove actions, an add control and a result count. Use for a compact applied-filter summary.

ReactHTML

1440 × 480

Open in new tab

Component.tsx27 lines

export default function BadgesRemovableChips() {
  return (
    <div className="w-72 text-neutral-900 sm:w-[28rem]">
      <div className="flex items-center justify-between gap-3">
        <h2 className="text-sm font-medium">Active filters</h2>
        <button type="button" className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Clear all</button>
      </div>
      <ul role="list" className="mt-3 flex flex-wrap gap-2">
        {[{ key: 'Status', value: 'Open' }, { key: 'Type', value: 'Any' }, { key: 'Owner', value: 'Me' }, { key: 'Date', value: 'Today' }].map((filter) => (
          <li key={filter.key} className="inline-flex h-7 items-center gap-1 rounded-full border border-neutral-300 pr-1 pl-2.5 text-xs has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900">
            <span><span className="text-neutral-500">{filter.key}:</span> {filter.value}</span>
            <button type="button" aria-label={`Remove filter: ${filter.key} ${filter.value}`} className="inline-flex size-5 items-center justify-center rounded-full transition-colors hover:bg-neutral-200 focus-visible:outline-hidden">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3"><path d="m6 6 12 12M18 6 6 18" /></svg>
            </button>
          </li>
        ))}
        <li>
          <button type="button" className="inline-flex h-7 items-center gap-1 rounded-full border border-dashed border-neutral-300 bg-white px-2.5 text-xs font-medium transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3"><path d="M12 5v14M5 12h14" /></svg>
            Add filter
          </button>
        </li>
      </ul>
      <p className="mt-4 text-sm text-neutral-500">1,284 results</p>
    </div>
  )
}

Pattern notes

When to use: Use for applied search or table filters. Pick badges-tag-groups when labels are static metadata. Variations: remove Clear all for mandatory filters, add a filter count to the heading, or replace the result count with a short summary.
Hierarchy: Read Active filters, four Key: Value chips, Add filter, then the 1,284 results count. Keys use neutral-500; values neutral-900. Remove controls name their complete filter. Keys and values each up to one short word; result count is a generic realistic value.
Responsive: At 640px only the width grows from 288px to 448px. Chips wrap naturally into three mobile rows and fewer desktop rows; controls and the result count keep their dimensions.
Layout: A 288px (w-72) root grows to 448px (sm:w-[28rem]) at 640px. A 14px medium title and text Clear all button share a header. A role=list chip row sits 12px below, wraps with 8px gaps and includes an Add filter button. Each 28px full-radius chip has a 1px neutral-300 border, 10px left and 4px right padding, a 12px key/value label and a 20px round remove button with a 12px X. A 14px result count follows after 16px.
States: Remove hover fills neutral-200 and uses focus-visible:outline-hidden; its chip shows a 2px neutral-900 outline offset 2px through has-[:focus-visible]. The hidden outline becomes a transparent 2px focus outline in forced-colors mode. Add filter has a dashed border, neutral-50 hover fill and standard focus outline. Clear all hovers neutral-600 and shows that outline. Actions are static slots for host filtering behaviour.

Desktop wireframe

┌──────────────────────────────────────────────────┐
│ Active filters                    [Clear all]    │
│ (Status: Open [X]) (Type: Any [X])               │
│ (Owner: Me [X]) (Date: Today [X]) [+ Add filter] │
│ 1,284 results                                    │
└──────────────────────────────────────────────────┘

View all

Badges — Access badges in a comparison table
Layout tags: table,compact
Badges — Capability badges in a small grid
Layout tags: grid,icons,compact
Badges — Counts and dot indicators
Layout tags: layered,numbers,icons,compact

Badges — Removable filter chips

Pattern notes

More in Badges

Badges — Access badges in a comparison table

Badges — Capability badges in a small grid

Badges — Counts and dot indicators