# Clear all filters control resets to unfiltered state in one action

- **Pattern:** `ab-001060` (`directory-search-discovery.facets-filters.clear-all-button`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001060
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001060)

## Why it matters

Users accumulate filters exploratively — they click a category, a price range, a rating threshold, then realize they want to start over. Without a clear-all control, they must find and click the remove button on each chip one at a time, or figure out that clicking the filter again toggles it off. Both paths take 4-8 seconds of friction at the moment the user most wants to restart their exploration. A single `Clear all` button resolves this to one click and signals that the interface respects the user's time.

## Severity rationale

High because filter reset is a frequent action and per-filter teardown compounds friction at the exact moment users want to pivot their search.

## Remediation

Add a `Clear all` button inside the filter panel header that calls a handler resetting every filter key to `null` or default. Hide the button when no filters are active so it doesn't add noise. Edit `components/FilterPanel.tsx`:

```tsx
{Object.values(filters).some(Boolean) && (
  <button onClick={() => onChange({ category: null, price: null, rating: null })}>
    Clear all
  </button>
)}
```

## Detection

- **ID:** `clear-all-button`
- **Severity:** `high`
- **What to look for:** Enumerate all relevant files and Apply 2-3 filters. Look for a "Clear all filters" button, "Reset filters" link, or similar control. Click it and verify that all filters are removed in a single action and results revert to unfiltered.
- **Pass criteria:** A "Clear all" or "Reset filters" button is present (easily visible, not hidden in a menu). Clicking it removes all active filters and returns results to the full, unfiltered state.
- **Fail criteria:** No "Clear all filters" control exists, or clicking it does not clear all filters (only clears some).
- **Skip (N/A) when:** Directory has fewer than 3 filterable attributes (see Global N/A Rule).
- **Detail on fail:** `"No 'Clear all filters' button found. User must manually deselect each filter to reset."` or `"'Reset filters' button clears only some filters, leaving one or more filters active."`
- **Remediation:** Add a clear-all button in your filter panel:

  ```tsx
  // components/FilterPanel.tsx
  export function FilterPanel({ filters, onChange }) {
    const handleClearAll = () => {
      onChange({ category: null, price: null, rating: null })
    }

    return (
      <div className="filter-panel">
        <div className="flex justify-between items-center mb-4">
          <h3>Filters</h3>
          {Object.values(filters).some(v => v) && (
            <button onClick={handleClearAll} className="text-sm text-blue-600">
              Clear all
            </button>
          )}
        </div>
        {/* filter controls */}
      </div>
    )
  }
  ```

  Show the button only when at least one filter is active.

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001060