Chips con X para quitar
Los chips activos muestran una X; al pulsarla, el chip se encoge y desaparece. Un botón los recupera todos.
Ajustes
Código
<div class="uv-fcx"><button class="c on"><b>Todo</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>Diseño</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>Código</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>Fotos</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>Vídeo</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">Restaurar</button></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Dónde usarlo
Sirve allí donde la gente ordena una lista de temas. Por ejemplo, una app de noticias en la que el lector quita las secciones que nunca lee, o un paso de bienvenida donde descartas los intereses que no te encajan. La salida encogiéndose se siente intencionada, no un error. Lo encontrarás como chips eliminables o etiquetas con X.
Deja siempre un camino de vuelta, como el botón de restaurar de la demo. Quitar cosas está bien mientras no sea definitivo. En el móvil, haz la X lo bastante grande para acertar y separa los chips para que nadie pulse el que no era.