6 tương tác · 300 icon

Tương tác của icon động

Mỗi icon đi kèm micro-interaction mà nó được thiết kế cho: lặp liên tục, bật/tắt hoặc phát lại khi click, hay phát khi hover. React component lo phần kết nối và tôn trọng thiết lập giảm chuyển động, còn prop interaction cho phép chuyển bất kỳ icon nào sang tương tác khác.

interaction="loop"Icon động lặp liên tục21 iconPhát liên tục; đứng yên ở khung hình tĩnh đầu tiên khi người dùng bật giảm chuyển động.Icon lặp thường dùng cho spinner loading, cảnh báo đang hoạt động, chuông đang rung hoặc gợi ý cuộn xuống.
interaction="click-toggle"Icon động bật/tắt khi click37 iconChuyển giữa hai trạng thái khi click, hoặc chuyển ngay lập tức khi người dùng bật giảm chuyển động.Icon bật/tắt khi click thường dùng cho các nút tắt/bật tiếng, ẩn/hiện mật khẩu, menu/đóng, phát/tạm dừng và thích.
interaction="click-replay"Icon động khi click64 iconPhát lại một lần từ đầu sau mỗi lần click, trừ khi người dùng bật giảm chuyển động.Icon động khi click thường xác nhận các nút gửi, lưu, làm mới, tải xuống, thêm vào giỏ và định dạng văn bản.
interaction="hover"Icon động khi hover21 iconPhát xuôi khi con trỏ đi vào (mouseenter) và phát ngược khi con trỏ rời đi (mouseleave).Icon động khi hover thường dùng cho mục điều hướng, nút xóa, cài đặt, nút phóng to/thu nhỏ và liên kết mạng xã hội.
interaction="hover-replay"Icon động phát khi hover144 iconPhát một lần khi con trỏ đi vào (mouseenter), trừ khi người dùng bật giảm chuyển động. Rời chuột không làm hiệu ứng dừng; hover lại trong lúc đang phát cũng không khởi động lại.Icon phát khi hover thường làm sinh động liên kết mũi tên, danh sách tính năng, nút trên thanh công cụ và thẻ trên landing page.
interaction="hover-loop"Icon động lặp khi hover13 iconLặp khi đang hover, chạy nốt chu kỳ hiện tại sau khi con trỏ rời đi (mouseleave) và đứng yên khi người dùng bật giảm chuyển động.Icon lặp khi hover thường dùng cho liên kết mạng xã hội, lời mời tham gia cộng đồng, liên kết portfolio và bộ chọn ngôn ngữ.

Chọn tương tác phù hợp

Trạng thái kéo dài, như đang tải hoặc một cảnh báo đang hoạt động: lặp.
Nút bật/tắt, như tắt tiếng, menu hoặc hiện mật khẩu: click bật/tắt, kèm active nếu cần kiểm soát state.
Thao tác một lần, như gửi, lưu hoặc làm mới: click phát lại.
Gợi ý trước nội dung một liên kết sẽ mở: hover, chạy ngược lại khi con trỏ rời đi.
Thanh công cụ và danh sách mà người dùng hay lướt chuột qua: hover phát lại, tự chạy hết hiệu ứng.
Liên kết mời người dùng nán lại lâu hơn, như icon mạng xã hội: hover lặp.

Giảm chuyển động

React component tuân theo prefers-reduced-motion và cập nhật ngay khi thiết lập này thay đổi. Chạm trên màn hình cảm ứng không bao giờ kích hoạt hiệu ứng hover.

loop: icon không tự phát và đứng yên ở khung hình tĩnh đầu tiên.
click-toggle: cú click chuyển ngay sang trạng thái còn lại, bỏ qua hiệu ứng ở giữa.
click-replay: cú click vẫn đến được handler của bạn nhưng hiệu ứng không phát.
hover: hover không phát hiệu ứng.
hover-replay: hover không phát hiệu ứng.
hover-loop: icon đứng yên khi được hover.