HTML + CSSFiltros
Segmentado que cambia de color
Un control segmentado cuyo fondo e indicador cambian de tono según la opción que eliges.
Ajustes
16px
1x
Código
<div class="uv-fsc" style="--t:0"><span class="p"></span><button data-t="0" class="on">Todo</button><button data-t="1">Activos</button><button data-t="2">Hecho</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
Pensado para filtros de estado. Una app de tareas que cambia entre Todas, Activas y Hechas, o la página de pedidos de una tienda online con pendientes, enviados y entregados. El cambio de color da a cada estado su ambiente y ves de un vistazo dónde estás. Échale un ojo si necesitas un filtro de estado con color.
Escoge colores con sentido: un tono neutro para «Todas» y algo más verde para lo terminado. Eso sí, no dependas solo del color. El texto tiene que decir qué está elegido, para quien no distingue bien los tonos.