Saltar al contenido
ES

37 iconos · interaction="click-toggle"

Iconos animados que alternan con un clic

Cada clic anima el icono entre dos estados y lo deja en el nuevo, lo que convierte estos iconos en la parte visual de un control de activar y desactivar. El icono siempre muestra el estado actual, así que combínalo con aria-pressed o con un atributo checked y el botón se explica solo.

Todos los iconos con la interacción “Alternar con clic”

Cómo se comporta

Alterna entre dos estados al hacer clic, o cambia de inmediato si se prefiere movimiento reducido.

Si se prefiere movimiento reducido, un clic cambia al otro estado de inmediato, sin la animación intermedia. El componente de React se encarga de todo esto; tú solo eliges el icono.

Dónde usarlos

  • Botones para silenciar y reactivar el sonido
  • Campos para mostrar y ocultar la contraseña
  • Botones de menú hamburguesa y de cerrar
  • Controles de reproducir y pausar
  • Botones de me gusta, estrella y marcador
  • Casillas de verificación, botones de opción e interruptores

Por categoría

  • Notificaciones · 2

    Notification, Notification V2

  • Navegación · 4

    Burger Menu, Menu V2, Menu V3, Menu V4

  • Acciones · 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

  • Formularios · 3

    Checkbox, Radio button, Toggle

  • Multimedia · 10

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

  • Comunicación · 1

    Phone Off

  • Dispositivos · 1

    Wifi Off

  • Clima · 2

    Cloud Off, Zap Off

Úsalo en React

Los iconos de esta lista usan esta interacción por defecto, pero cualquier otro icono también puede usarla: pasa la prop interaction.

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

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

Los clics alternan el icono por sí solos. Para mantenerlo sincronizado con tu estado, pasa active: el icono se anima cada vez que active cambia y los clics ya no lo alternan por su cuenta.

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 muestra el estado final
      onClick={() => setOpen(!open)}
      aria-label={open ? 'Cerrar menú' : 'Abrir menú'}
    />
  );
}

Todas las props están en la documentación. Fuera de React, los iconos son archivos Lottie JSON; en Iconos Lottie verás cómo recrear las interacciones con lottie-web.

Preguntas frecuentes

¿Qué iconos usan la interacción “Alternar con clic”?

37 iconos: 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 y 22 más. Los iconos que alternan con un clic suelen controlar botones de silenciar y reactivar, mostrar y ocultar contraseña, menú y cerrar, reproducir y pausar, y me gusta.

¿Qué pasa cuando el usuario prefiere movimiento reducido?

Si se prefiere movimiento reducido, un clic cambia al otro estado de inmediato, sin la animación intermedia. El componente de React lee prefers-reduced-motion y se actualiza cuando cambia el ajuste, así que no necesitas escribir código para ello.

¿Cómo cambio la interacción de un icono?

Cada icono reproduce la interacción para la que fue diseñado. Pasa interaction="click-toggle" para dar este comportamiento a cualquier otro icono, u otro valor ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') para cambiarlo. Las props autoplay, loop y speed ajustan la reproducción. Para controlar el estado tú mismo, pasa active={isOn} y actualízalo en onClick: así los clics dejan de alternar el icono por sí solos.