37 ícones · interaction="click-toggle"

Ícones animados que alternam no clique

Cada clique anima a passagem entre dois estados, e o ícone permanece no novo estado. Isso faz desses ícones a parte visual de um controle liga/desliga. O ícone sempre mostra o estado atual; combine-o com aria-pressed ou com um atributo checked e o botão se explica sozinho.

Todos os ícones com a interação “Alternar no clique”

Como funciona

Alterna entre dois estados no clique, ou troca na hora quando o usuário prefere movimento reduzido.

Com movimento reduzido, o clique troca para o outro estado na hora, sem a animação de transição. O componente React cuida de tudo isso; você só escolhe o ícone.

Onde usar

Botões de mudo
Campos de senha com mostrar e ocultar
Botões de menu hambúrguer e de fechar
Controles de play e pause
Botões de curtir, dar estrela e salvar
Checkboxes, radio buttons e switches

Por categoria

Notificações · 2
Notification, Notification V2
Navegação · 4
Burger Menu, Menu V2, Menu V3, Menu V4
Ações · 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
Formulários · 3
Checkbox, Radio button, Toggle
Mídia · 10
Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume
Comunicação · 1
Phone Off
Dispositivos · 1
Wifi Off
Clima · 2
Cloud Off, Zap Off

Use no React

Os ícones listados aqui usam esta interação por padrão. Qualquer outro ícone também pode usá-la: basta passar a prop interaction.

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

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

Os cliques alternam o ícone sozinhos. Para mantê-lo em sincronia com o seu estado, passe active: o ícone anima sempre que active muda, e os cliques deixam de alterná-lo por conta própria.

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 mostra o estado final
      onClick={() => setOpen(!open)}
      aria-label={open ? 'Fechar menu' : 'Abrir menu'}
    />
  );
}

Todas as props estão na documentação. Fora do React, os ícones são arquivos Lottie JSON; a página Ícones Lottie mostra como recriar as interações com lottie-web.

Perguntas frequentes

Quais ícones usam a interação “Alternar no clique”?

37 ícones: 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 e mais 22. Ícones que alternam no clique costumam controlar botões de mudo, mostrar/ocultar senha, menu/fechar, play/pause e curtir.

O que acontece quando o usuário prefere movimento reduzido?

Com movimento reduzido, o clique troca para o outro estado na hora, sem a animação de transição. O componente React lê prefers-reduced-motion e se atualiza quando a configuração muda, então você não precisa escrever nenhum código para isso.

Como mudo a interação de um ícone?

Cada ícone executa a interação para a qual foi desenhado. Passe interaction="click-toggle" para dar esse comportamento a qualquer outro ícone, ou outro valor ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') para trocá-la. As props autoplay, loop e speed ajustam a reprodução. Para controlar o estado você mesmo, passe active={isOn} e atualize o valor no onClick: a partir daí, os cliques não alternam mais o ícone por conta própria.