Removable chips with X
Selected chips show a small X. Tap it and the chip shrinks away; a restore button brings them all back.
Settings
Code
<div class="uv-fcx"><button class="c on"><b>All</b><i class="x"><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></i></button><button class="c on"><b>Design</b><i class="x"><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></i></button><button class="c"><b>Code</b><i class="x"><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></i></button><button class="c"><b>Photos</b><i class="x"><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></i></button><button class="c"><b>Video</b><i class="x"><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></i></button><button class="rs">Reset</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
Useful wherever people tidy up a list of topics. A news app, for example, where readers drop the sections they never read, or an onboarding step that asks for interests and lets you discard the ones you don't want. The shrinking exit feels deliberate, not accidental. People often search for this as removable chips or dismissible tags.
Always keep a way back, like the restore button in the demo. Removing things is fine as long as it is not final. Make the X big enough to hit on a phone, and leave some space between chips so a tap does not land on the wrong one.