Switch

Uso

O Switch deve ser utilizado quando é necessário que o usuário ative ou desative uma funcionalidade específica sem a necessidade de navegação adicional. Ele é especialmente indicado em contextos onde a ação é binária e o estado precisa estar sempre visível para o usuário.

No Design System em questão, o Switch é frequentemente incorporado em outros componentes que possuem slots de ícone (como listas, botões ou cards), funcionando como uma indicação visual do estado ativado ou desativado, enquanto as interações como clique, hover e foco são gerenciadas pelo componente pai.

Evite utilizar o Switch isoladamente para ações momentâneas (neste caso, prefira Botões) ou em contextos onde a confirmação de ação é necessária (prefira Checkboxes).

Anatomia

❖. Container

• Agrupa os elementos visuais do Switch, indicando visualmente se está no estado Rest (desligado) ou Selected (ligado).

• A mudança de estado é comunicada pela cor de fundo do container.

1. Handle shape

• Representa o elemento deslizante (a “bolinha”) que se move lateralmente para indicar a alternância de estado.

• Este elemento não recebe informações dinâmicas. Ele é obrigatório e sempre visível.

• Deve se movimentar suavemente entre as extremidades do container durante a mudança de estado.

Variantes

Large

Apresenta altura de 24px, sendo indicado para contextos em que substitui ícones de mesmo tamanho ou compõe componentes com maiores áreas clicáveis.

Small

Possui altura de 20px, sendo recomendado para substituição de slots de ícones menores, mantendo consistência visual em componentes mais compactos.

Comportamento

O Switch mantém sempre um estado ativo — ou ligado (Selected) ou desligado (Rest). Ele nunca se apresenta em estado “neutro” ou indeterminado.

O Switch é projetado para uso embutido, sem manipulação direta de interações como hover, focus ou press — estas são herdadas do componente no qual ele é incorporado.

Referências

Histórico de Atualizações