Clear filters button
A button that only appears once a filter is active, shows how many are on and resets them in one click.
Settings
Code
<div class="uv-fcr"><div class="rw"><button class="c">Design</button><button class="c">Code</button><button class="c">Photos</button><button class="c">Video</button></div><button class="cl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg><b>Clear filters</b><i class="n">0</i></button></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
On a stock photo site, people stack filters fast: Illustration, Vector, Photo, Video. When results dry up, they need a quick way out. This button stays hidden until there's something to clear, then slides in with a count. That way there's no dead button sitting on a page with no filters. Often searched as a reset filters button.
Put it near the filters themselves, not at the far end of the page. The number matters: “Clear filters (3)” tells people how much they're about to undo. Pair it with an empty state that suggests clearing when there are no results.