Switch

É utilizado para trocar rapidamente entre dois possíveis estados. São muito usados para situações como "Ligado/Desligado" e ações que ocorrem imediatamente após o usuário mudar o switch.

Boas práticas

• Utilize descrições junto ao componente para que a ação fique clara.
• Use adjetivos ao invés de verbos para descrever as labels e o estado do switch (Ex: Ligado, Desligado).
• A descrição deve permanecer no lado direito do switch.
• Sua função é habilitar ou desabilitar uma única função. Caso precise de um componente para fazer uma seleção entre mais opções, utilize Checkbox ou Radio Button.
• No estado de hover, utilize hint com verbos indicando ao usuário o resultado do status caso complete a ação (Ex.: Desabilitar envio automático).

Exemplo

import { Switch } from '@lemonade/ui'
import React from 'react'

function SwitchEx() {
  return <Switch name='active' />
}

export default SwitchEx