HTML + CSSFiltres
Chips avec compteur
Chaque chip affiche un petit nombre qui fait un bond à chaque changement.
Réglages
16px
1x
Code
<div class="uv-fcb"><button class="on">Tout<span class="b">12</span></button><button class="">Design<span class="b">34</span></button><button class="">Code<span class="b">7</span></button><button class="">Photos<span class="b">21</span></button></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Où l’utiliser
Les chiffres aident à choisir où cliquer. Sur un forum, indiquez combien de discussions se trouvent dans Général, Aide, Projets et Emploi ; dans une messagerie de support, combien de tickets sont ouverts, en attente ou résolus. Le petit bond attire l’œil quand un nombre change. Idéal si vous cherchez des onglets de filtre avec badge.
Les chiffres doivent être justes et à jour, sinon l’effet se retourne contre vous. Si une catégorie est vide, grisez-la plutôt que de la cacher. Et restez si possible sous les trois chiffres : « 999+ » fait très bien l’affaire.