Estados de Componentes
Todo componente interativo deve ter seus estados definidos. Um componente que não reage à interação do usuário parece "morto" ou "quebrado", prejudicando a UX e a acessibilidade.
Por que definir estados?
Os estados fornecem feedback imediato. Eles dizem ao usuário: "Eu entendi que você clicou", "Este campo está com erro" ou "Você não pode clicar aqui agora".
Estados Obrigatórios
- Default (Padrão): O estado inicial do componente, sem interação.
- Hover (Flutuar): Quando o cursor está sobre o componente (essencial para Desktop).
- Focus (Foco): Quando o componente é selecionado via teclado (Tab). Crucial para acessibilidade.
- Pressed (Pressionado): O estado exato do clique ou toque. Dá sensação de profundidade e resposta.
- Disabled (Desativado): Quando a ação não é permitida. Deve ser visualmente claro, mas ainda legível.
- Loading (Carregando): Quando o componente iniciou uma ação mas ainda não terminou. Substitui o texto por um spinner ou skeleton.
- Error (Erro): Feedback visual de que algo deu errado na interação com aquele componente específico.
- Empty (Vazio): Como o componente se comporta quando não tem conteúdo (ex: um Menu sem itens).
Como fazer vs Como não fazer
✅ Como fazer
- Use o padrão de opacidade para estados (ex: 8% de preto sobre a cor original para Hover).
- Garanta que o estado de Focus tenha um anel (outline) de alto contraste.
- No Figma, organize os estados como variantes para que o desenvolvedor possa mapear como props.
❌ Como não fazer
- Mudar a cor base do componente no Hover para algo completamente diferente da marca (gera inconsistência).
- Esquecer de definir o estado de Disabled, fazendo o usuário clicar repetidamente em algo que não funciona.
- Usar apenas a cor vermelha para o estado de Erro sem incluir um ícone ou texto de ajuda (fere a acessibilidade para daltônicos).