Toggle/Switch
- Angular:
mds-checkbox - CSS/HTML (mds-styles): Checkbox switch=switch
- Figma: ✅ — abrir Design System 2.0 ↗ (busque pelo frame “Toggle” dentro do arquivo)
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Switch é um controle binário utilizado para alternar entre dois estados opostos (ligado/desligado). Ele deve ser aplicado em configurações que exigem uma resposta imediata do sistema após a interação.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Efeito Imediato: Use apenas quando a alteração não exigir um botão de confirmação posterior.
- Rótulos Diretos: O rótulo deve descrever o que o Switch faz quando está “ligado”. Use Caixa de Sentença.
- Vá Direto ao Ponto: Não use rótulos que mudam conforme o estado (ex: não troque “Ativado” por “Desativado”). O rótulo deve ser estático e o componente indica o estado.
- Certo: Notificações de SMS (O switch indica se está on/off).
- Neutralidade: Evite perguntas.
- Ruim: Você deseja ativar o GPS?
- Melhor: Rastreador GPS.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto Logístico | Estilo Incorreto (Vago/Pessoal) | Estilo UX (Conciso/Direto) |
|---|---|---|
| Visibilidade | Mostrar motoristas que estão fora de serviço | Motoristas offline |
| Sistema | Ativar o envio automático de e-mails agora | Envio automático de e-mail |
| Interface | Modo de visualização em alta densidade | Visualização compacta |
Sugestão de padronização
Seção intitulada “Sugestão de padronização”- O termo Toggle é genérico (pode ser um Toggle Button ou Accordion). O termo Checkbox refere-se a um comportamento de lista/seleção. O Switch (Interruptor) é o nome oficial no Material Design e na maioria das bibliotecas modernas (React, Vue, mobile iOS/Android).
- Ação: Renomear o componente no Figma para Switch e tratar o Angular como um “Switch Component”, mesmo que tecnicamente seja um checkbox estilizado.