Pular para o conteúdo principal

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.

Feedback