English
简体中文
Português (Brasil)
Deutsch
Français
日本語
한국어
Čeština
Tiếng Việt
Bahasa Indonesia
Türkçe
Русский6 interacciones · 300 iconos
Interacciones de los iconos animados
Cada icono viene con la microinteracción para la que fue diseñado: se repite en bucle, alterna o se repite al hacer clic, o se reproduce con hover. El componente de React la conecta y respeta el movimiento reducido, y la prop interaction cambia cualquier icono a otra.
- interaction="loop"Iconos animados en bucle21 iconosSe reproduce sin parar; se queda en el primer fotograma estático si se prefiere movimiento reducido.Los iconos en bucle suelen usarse para spinners de carga, alertas activas, una campana que suena o una indicación para desplazarse hacia abajo.
- interaction="click-toggle"Iconos animados que alternan con un clic37 iconosAlterna entre dos estados al hacer clic, o cambia de inmediato si se prefiere movimiento reducido.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.
- interaction="click-replay"Iconos animados al hacer clic64 iconosSe reproduce una vez desde el principio con cada clic, salvo que se prefiera movimiento reducido.Los iconos que se animan al hacer clic suelen confirmar botones de enviar, guardar, actualizar, descargar, añadir al carrito y dar formato.
- interaction="hover"Iconos animados con hover21 iconosAvanza con mouseenter y retrocede con mouseleave.Los iconos con hover suelen marcar elementos de navegación, botones de eliminar, ajustes, controles de zoom y enlaces a redes sociales.
- interaction="hover-replay"Iconos animados que se reproducen con hover144 iconosSe reproduce una vez con mouseenter, salvo que se prefiera movimiento reducido. Salir no lo detiene, y volver a entrar durante la reproducción no lo reinicia.Los iconos que se reproducen con hover suelen animar enlaces con flecha, listas de funciones, botones de barras de herramientas y tarjetas de landing pages.
- interaction="hover-loop"Iconos animados en bucle con hover13 iconosSe repite en bucle durante el hover, termina el ciclo en curso tras mouseleave y se queda estático si se prefiere movimiento reducido.Los iconos en bucle con hover suelen marcar enlaces sociales, invitaciones a comunidades, enlaces a portafolios y selectores de idioma.
Cómo elegir una interacción
- Un estado que dura, como una carga o una alerta activa: bucle.
- Un control de activar y desactivar, como silenciar, el menú o mostrar la contraseña: alternar con clic, con
activepara el estado controlado. - Una acción puntual, como enviar, guardar o actualizar: repetir con clic.
- Una pista de lo que abre un enlace: hover, que retrocede cuando sale el puntero.
- Barras de herramientas y listas que se recorren con el cursor: repetir con hover, que termina por sí sola.
- Enlaces que invitan a mirar con calma, como los iconos sociales: bucle con hover.
Movimiento reducido
El componente de React respeta prefers-reduced-motion y se actualiza cuando cambia el ajuste. Los toques en pantallas táctiles nunca inician las animaciones de hover.
loop: el icono no se reproduce automáticamente y se queda en su primer fotograma estático.click-toggle: un clic cambia al otro estado de inmediato, sin la animación intermedia.click-replay: los clics siguen llegando a tu handler, pero la animación no se reproduce.hover: el hover no reproduce la animación.hover-replay: el hover no reproduce la animación.hover-loop: el icono se queda estático durante el hover.