Aller au contenu
FR

37 icônes · interaction="click-toggle"

Icônes animées à bascule au clic

Chaque clic anime l’icône d’un état à l’autre, et elle y reste : ces icônes sont la moitié visuelle d’un contrôle on/off. L’icône montre toujours l’état actuel ; associez-la à aria-pressed ou à un attribut checked et le bouton se passe d’explication.

Toutes les icônes « bascule au clic »

Comportement

Bascule entre deux états au clic, ou change d’état immédiatement quand la réduction des animations est activée.

Si la réduction des animations est activée, un clic passe immédiatement à l’autre état, sans l’animation intermédiaire. Le composant React gère tout cela : vous n’avez qu’à choisir l’icône.

Où l’utiliser

  • Boutons pour couper et rétablir le son
  • Champs de mot de passe avec affichage et masquage
  • Boutons menu hamburger et fermeture
  • Contrôles lecture et pause
  • Bascules j’aime, étoile et signet
  • Cases à cocher, boutons radio et interrupteurs

Par catégorie

  • Notifications · 2

    Notification, Notification V2

  • Navigation · 4

    Burger Menu, Menu V2, Menu V3, Menu V4

  • Actions · 14

    Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3

  • Formulaires · 3

    Checkbox, Radio button, Toggle

  • Médias · 10

    Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume

  • Communication · 1

    Phone Off

  • Appareils · 1

    Wifi Off

  • Météo · 2

    Cloud Off, Zap Off

Utilisation dans React

Les icônes listées ici jouent cette interaction par défaut. Toute autre icône peut aussi l’utiliser : passez-lui la prop interaction.

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings utilise normalement 'hover'
<UseAnimations animation={settings} interaction="click-toggle" size={32} />

Les clics font basculer l’icône d’eux-mêmes. Pour la synchroniser avec votre état, passez active : l’icône s’anime chaque fois que active change, et les clics ne la font plus basculer seuls.

import { useState } from 'react';
import menu from 'react-useanimations/lib/menu';

export function MenuButton() {
  const [open, setOpen] = useState(false);
  return (
    <UseAnimations
      animation={menu}
      active={open} // true affiche l’état final
      onClick={() => setOpen(!open)}
      aria-label={open ? 'Fermer le menu' : 'Ouvrir le menu'}
    />
  );
}

Toutes les props sont décrites dans la documentation. En dehors de React, les icônes sont des fichiers Lottie JSON ; la page Icônes Lottie montre comment recréer les interactions avec lottie-web.

Questions fréquentes

Quelles icônes utilisent l’interaction « bascule au clic » ?

37 icônes : Notification, Notification V2, Burger Menu, Menu V2, Menu V3, Menu V4, Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off et 22 autres. Les icônes à bascule au clic pilotent typiquement les boutons son/muet, afficher/masquer le mot de passe, menu/fermer, lecture/pause et j’aime.

Que se passe-t-il quand l’utilisateur a activé la réduction des animations ?

Si la réduction des animations est activée, un clic passe immédiatement à l’autre état, sans l’animation intermédiaire. Le composant React lit prefers-reduced-motion et se met à jour quand le réglage change : vous n’avez aucun code à écrire pour cela.

Comment changer l’interaction d’une icône ?

Chaque icône joue l’interaction pour laquelle elle a été conçue. Passez interaction="click-toggle" pour donner ce comportement à n’importe quelle autre icône, ou une autre valeur ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') pour en changer. Les props autoplay, loop et speed règlent la lecture. Pour piloter l’état vous-même, passez active={isOn} et mettez-le à jour dans onClick : les clics ne font alors plus basculer l’icône d’eux-mêmes.