Chips con contador
Cada chip lleva un número y el contador da un saltito cada vez que cambia.
Ajustes
Código
<div class="uv-fcb"><button class="on">Todo<span class="b">12</span></button><button class="">Diseño<span class="b">34</span></button><button class="">Código<span class="b">7</span></button><button class="">Fotos<span class="b">21</span></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
Los números ayudan a decidir dónde pulsar. En un foro puedes mostrar cuántos hilos hay en General, Ayuda, Proyectos y Empleo; en la bandeja de un servicio de soporte, cuántas incidencias están abiertas, pendientes o resueltas. El saltito llama la atención cuando el número se actualiza, sin gritar. Útil si buscas pestañas de filtro con badge o contador.
Los números tienen que ser reales y estar al día, o el invento se vuelve en tu contra. Si una categoría está a cero, mejor atenuarla que esconderla. Y si puedes, no pases de tres cifras: «999+» vale perfectamente.