Notification Badge
Pastille rouge sur une cloche qui pulse tant qu'il reste du non-lu, rebondit à chaque arrivée et secoue avant de disparaître quand on vide.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La pastille .nbg-badge est posée dans le coin d'un vrai bouton .nbg-icon (cloche en SVG). Le nombre de départ est celui écrit dans la pastille (3 par défaut). Tant qu'il est supérieur à zéro, la pastille respire en boucle (nbg-pulse, 2 s, agrandissement à 115 %).
Le compteur se pilote par une petite API posée sur la racine : root.fx0744.add() ajoute 1 (ou add(5)), set(12) fixe une valeur, clear() remet à zéro, pulse(false) coupe la respiration, count() lit la valeur. Une hausse fait rebondir la pastille (0,5 s) ; une baisse change le chiffre sans animation ; zéro la fait secouer puis disparaître. Elle ne revient qu'avec un nouvel add() ou set().
Le clic sur la cloche vous appartient : branchez-y l'ouverture de votre liste de notifications, puis appelez clear() une fois qu'elles sont lues. Chaque racine a son propre compteur : deux cloches dans la page, ou le code collé deux fois, ne se mélangent pas.
Accessibilité
- Vrai bouton nommé : la cloche est un
<button>, atteignable au clavier, avec un anneau de focus visible. Son nom est le texte caché.nbg-sr, tenu à jour : « 3 notifications non lues », « Aucune notification non lue ». - Changements annoncés : chaque appel à l'API écrit la nouvelle phrase dans une zone
role="status", lue poliment. L'état de départ n'est pas annoncé. - Textes dans le HTML :
data-nbg-one,data-nbg-manyetdata-nbg-nonedonnent le singulier, le pluriel et le cas zéro, dans votre langue et votre vocabulaire (messages, commandes, colis). - Mouvement réduit : sous
prefers-reduced-motion: reduce, ni respiration, ni rebond, ni secousse ; le chiffre change et la pastille disparaît à zéro, sans délai. - Couleur seule : le rouge attire l'œil mais le nombre écrit et le nom du bouton portent l'information ; rien ne repose sur la couleur.
Compatibilité navigateur
JavaScript sans dépendance, animations CSS (transform, box-shadow) et SVG en ligne. Le masquage du texte pour lecteurs d'écran utilise clip-path: inset() (Chrome 55, Firefox 54, Safari 9.1). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux copies pilotées séparément, code collé deux fois, add, clear qui reste à zéro, set, pulse(false), clavier, toucher, 390 px, mouvement réduit, page anglaise, aucun nom ajouté sur window, 0 erreur.
Sans JavaScript, la cloche et la pastille s'affichent avec le nombre écrit dans le HTML, qui pulse ; seule l'API manque. Dans Safari sur Mac, Tab n'atteint les boutons que si l'option clavier du système est activée.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0744-root" data-nbg-one="notification non lue" data-nbg-many="notifications non lues" data-nbg-none="Aucune notification non lue">
<button class="nbg-icon" type="button">
<svg class="nbg-bell" aria-hidden="true">…</svg>
<span class="nbg-badge nbg-pulse" aria-hidden="true">3</span>
<span class="nbg-sr">3 notifications non lues</span>
</button>
<span class="nbg-sr nbg-live" role="status"></span>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Nombre de départ (HTML — texte de .nbg-badge) |
3 |
Écrivez la valeur réelle côté serveur ; 0 démarre pastille cachée. |
Piloter le compteur (JS — root.fx0744) |
— | add(k), set(n), clear(), pulse(true|false), count(). Par exemple add() à chaque message reçu par WebSocket. |
Textes lus (HTML — data-nbg-one, data-nbg-many, data-nbg-none) |
« notification non lue », « notifications non lues », « Aucune notification non lue » | Vocabulaire et langue de votre interface : « message non lu », « commande à préparer »… |
Respiration (HTML — classe nbg-pulse) |
présente | Retirez la classe pour une pastille immobile, ou appelez pulse(false) après lecture. |
Icône (HTML — contenu de .nbg-icon) |
cloche SVG | Remplacez le SVG par votre icône, ou par un texte (nom de canal) : la pastille suit le bouton. |
Couleurs et taille (CSS — .nbg-badge) |
dégradé #ef4444 → #dc2626, 22 px |
Couleur d'alerte de votre charte ; agrandissez min-width, height et font-size ensemble. |
FAQ
clear() remet à zéro, la pastille secoue puis disparaît et reste cachée. Elle ne revient que si votre code appelle add() ou set() avec un nombre positif.root.fx0744.set(n) à chaque réponse de votre serveur (requête régulière, WebSocket, notification push). set ne rebondit que si le nombre monte.clear() quand l'utilisateur les a vues.
