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
Ver todos: FiltrosDó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.