Toast
O Toast
é uma notificação exibida na parte superior da página, com mensagens curtas e contextualizadas.
Use para notificações do sistema, quando não precisar interromper a jornada da pessoa usuária. Toast não deve bloquear a tela (são elementos não-modais).
Caso você precise de apenas um título, com poucas palavras, em vez de uma mensagem completa, use o Toast
sem mensagem.
O Toast
deve sempre flutuar em cima do conteúdo, incluindo Drawer
ou Modal
, exibido a 32px abaixo do limite superior da tela e a 32px do limite direito da tela.
Uso das cores
A cor vermelha deve ser usada em situações críticas e que exijam atenção total, como excluir dados, saída do sistema, desconexão, feedbacks de perda de informação, entre outros.
A cor amarela deve ser usada em situações de atenção, porém o efeito da ação não é crítico. Não acontece perda de informações ou a ação pode ser revertida.
A cor verde deve ser usada em situações de feedback positivo. Geralmente está associada a uma ação correta.
A cor roxa deve ser usada para informações, elementos ou ações de apoio, além de situações relacionadas à ajuda e suporte da ferramenta.
A cor primária deve ser usada para informar novas funcionalidades, chamando a pessoa usuária a conhecer e testar.