Padrões

Estados de Interação

Todo elemento interativo passa por quatro estados. Sem implementar todos, a interface parece incompleta ou quebrada.

Anatomia

Adicionar disco
1
2
3
4
1

Enabled

Estado padrão. Nenhuma classe adicional. Totalmente interativo e visível.

2

Pressed

active:opacity-70 active:scale-[0.98] · Feedback tátil imediato. O scale cria sensação de pressão física.

3

Loading

disabled:opacity-70 + spinner substituindo o label. Atributo disabled no HTML impede duplo clique.

4

Disabled

disabled:opacity-40 · Ação indisponível. Sempre com disabled no HTML — nunca simule com CSS puro.

Estados

Enabled — Estado padrão. Nenhuma classe adicional.
Pressed active:opacity-70 active:scale-[0.98] Feedback tátil imediato ao toque. Scale cria sensação de pressão.
Loading disabled:opacity-70 + Spinner Botão desabilitado com spinner substituindo o label. Previne duplo submit.
Disabled disabled:opacity-40 Ação indisponível. Sempre com o atributo disabled no HTML.

Transições

Padrão transition duration-150 — opacity, transform, border-color. Rápido o suficiente para parecer instantâneo.
Animações decorativas duration-300 a duration-500 — sheets, toasts, modais. Nunca em reação direta ao toque.

Do / Don't

Preencha todos os campos para salvar

Do Use disabled HTML + opacity-40 + mensagem explicando por que a ação está indisponível.
Don't Não simule disabled com cores cinza sem o atributo disabled. O elemento continua clicável e enganará o usuário.
Do Estado loading: spinner + texto no gerúndio + disabled. Previne submissões duplicadas e comunica progresso.
Don't Não mantenha o botão habilitado durante o loading. O usuário pode clicar várias vezes e criar registros duplicados.