Pular para o conteúdo
PT

64 ícones · interaction="click-replay"

Ícones animados no clique

Estes ícones tocam uma vez, desde o início, a cada clique: uma pequena confirmação de que a ação deu certo. Combinam com ações pontuais que não deixam um estado para trás: enviar, salvar, atualizar, baixar, imprimir ou excluir.

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

Como funciona

Toca de novo desde o início a cada clique, a menos que o usuário prefira movimento reduzido.

Com movimento reduzido, os cliques continuam chegando ao seu handler, mas a animação não toca. O componente React cuida de tudo isso; você só escolhe o ícone.

Onde usar

  • Botões de enviar em formulários de chat e comentários
  • Botões de salvar, baixar e enviar arquivos
  • Botões de atualizar e girar
  • Botões de adicionar ao carrinho
  • Botões de formatação de texto em editores

Por categoria

  • Alertas · 1

    X Octagon

  • Navegação · 6

    Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out

  • Ações · 30

    Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square

  • Conteúdo · 5

    File Minus, File Plus, Folder Minus, Folder Plus, User Check

  • Mídia · 6

    Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle

  • Edição de texto · 8

    Align Center, Align Justify, Align Left, Align Right, Bold, Italic, Type, Underline

  • Comunicação · 3

    Phone, Phone Call, Send

  • Dispositivos · 1

    Printer

  • E-commerce · 1

    Shopping Cart

  • Design e layout · 3

    Crop, Mouse Pointer, Scissors

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-replay" size={32} />

Coloque o ícone num botão de verdade com a render prop, para que ele possa receber foco e ser anunciado por leitores de tela. O seu onClick roda primeiro; chame event.preventDefault() para pular a animação.

import download from 'react-useanimations/lib/download';

<UseAnimations
  animation={download}
  size={24}
  onClick={handleDownload}
  render={(eventProps, animationProps) => (
    <button type="button" aria-label="Baixar" {...eventProps}>
      <span {...animationProps} />
    </button>
  )}
/>

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 “Reproduzir no clique”?

64 ícones: X Octagon, Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out, Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2 e mais 49. Ícones de clique costumam confirmar botões de enviar, salvar, atualizar, baixar, adicionar ao carrinho e formatar.

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

Com movimento reduzido, os cliques continuam chegando ao seu handler, mas a animação não toca. 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-replay" 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.