Floating filter button
A round floating button that grows into a small filter panel, with options sliding in one by one.
Settings
Code
<div class="uv-fmf"><div class="ph"><div class="body"><span></span><span></span><span></span><span></span></div><div class="fb"><button class="tg"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/></svg></button><div class="pn"><div class="tt">Filter by</div><button style="--i:0"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Low price</button><button style="--i:1"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Top rated</button><button style="--i:2"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Near me</button><button style="--i:3"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Available</button></div></div></div></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
Useful when the screen is mostly content and filters are occasional. A directory of coworking spaces, for instance, where people scroll through listings and only sometimes want Lowest price, Best rated, Near me or Available. The button waits in the corner until someone needs it. People looking for a floating action button menu usually want something like this.
A floating button can cover the last item of a list, so add some bottom padding to the content. Keep the panel to four or five options; anything longer belongs in a proper sheet. Tapping outside should close it, as it does here.