6 interaksi · 300 ikon

Interaksi ikon animasi

Setiap ikon hadir dengan interaksi mikro yang dirancang untuknya: berputar terus, beralih atau diputar ulang saat diklik, atau diputar saat di-hover. Komponen React mengatur semuanya dan menghormati preferensi reduced motion, sedangkan prop interaction bisa mengganti interaksi ikon mana pun.

interaction="loop"Ikon animasi loop21 ikonBerputar terus-menerus; jika reduced motion dipilih, ikon tetap diam di frame pertama.Ikon loop biasanya dipakai untuk spinner loading, peringatan yang aktif, lonceng yang berdering, atau petunjuk gulir ke bawah.
interaction="click-toggle"Ikon animasi toggle saat diklik37 ikonBeralih antara dua keadaan saat diklik, atau langsung berpindah jika reduced motion dipilih.Ikon toggle saat diklik biasanya dipakai untuk tombol bisukan/aktifkan suara, tampilkan/sembunyikan kata sandi, menu/tutup, play/pause, dan suka.
interaction="click-replay"Ikon animasi klik64 ikonDiputar ulang sekali dari awal setiap kali diklik, kecuali jika reduced motion dipilih.Ikon klik biasanya mengonfirmasi tombol kirim, simpan, muat ulang, unduh, tambah ke keranjang, dan format teks.
interaction="hover"Ikon animasi hover21 ikonDiputar maju saat mouseenter dan mundur saat mouseleave.Ikon hover biasanya menandai item navigasi, tombol hapus, pengaturan, kontrol zoom, dan tautan media sosial.
interaction="hover-replay"Ikon animasi yang diputar saat hover144 ikonDiputar sekali saat mouseenter, kecuali jika reduced motion dipilih. Keluar dari ikon tidak menghentikannya, dan masuk lagi selama animasi berjalan tidak memulainya ulang.Ikon yang diputar saat hover biasanya menghidupkan tautan panah, daftar fitur, tombol toolbar, dan kartu landing page.
interaction="hover-loop"Ikon animasi loop saat hover13 ikonBerputar berulang selama di-hover, menyelesaikan siklusnya setelah mouseleave, dan tetap diam jika reduced motion dipilih.Ikon loop saat hover biasanya menandai tautan media sosial, undangan komunitas, tautan portofolio, dan pemilih bahasa.

Memilih interaksi

Keadaan yang berlangsung lama, seperti loading atau peringatan yang aktif: loop.
Kontrol nyala/mati, seperti bisukan, menu, atau tampilkan kata sandi: toggle saat klik, dengan active untuk state yang dikendalikan.
Aksi sekali jalan, seperti kirim, simpan, atau muat ulang: putar ulang saat klik.
Petunjuk tentang apa yang dibuka sebuah tautan: hover, yang berbalik saat pointer keluar.
Toolbar dan daftar yang sering dilintasi kursor: putar sekali saat hover, yang selesai dengan sendirinya.
Tautan yang mengundang untuk dilihat lebih lama, seperti ikon media sosial: loop saat hover.

Reduced motion

Komponen React mengikuti prefers-reduced-motion dan ikut menyesuaikan saat pengaturannya berubah. Ketukan di layar sentuh tidak pernah memulai animasi hover.

loop: ikon tidak berputar otomatis dan tetap diam di frame pertamanya.
click-toggle: klik langsung memindahkan ikon ke keadaan lainnya, tanpa animasi peralihan.
click-replay: klik tetap sampai ke handler Anda, tetapi animasinya tidak diputar.
hover: hover tidak memutar animasinya.
hover-replay: hover tidak memutar animasinya.
hover-loop: ikon tetap diam saat di-hover.