Toasts

O que é?

Os toasts exibem mensagens de feedback que retornam ações da pessoa usuária durante o fluxo. Eles são perceptíveis, mas não atrapalham a experiência e não exigem que uma ação seja tomada.

• Devem ser breves e temporários;
• Possuem textos curtos e objetivos que não atrapalhem, nem tirem a atenção da pessoa usuária.

Anatomia

1. Label: Mensagem curta e objetiva de feedback
2. Button Text: Opcional. Botão de ação
3. Ícone de fechar: Dispensa o componente
4. Content Area: Box flutuante a 32px do final da tela

Tipos de toast

O toast é composto por três variações referentes ao status de feedback: Success, Error e Info. Cada um deles é usado para dar determinado retorno ao usuário.

Existe a possibilidade de adicionar um botão de ação. Esse botão deve servir apenas para ações relacionadas ao feedback. Ex.: “Tentar novamente” ou “Desfazer”.

<div class="toast is-info">
  <div class="toast-content">
    Notification
  </div>
  <div class="toast-action">
    <button class="button is-text">Action</button>
    <button class="delete"></button>
  </div>
</div>

Toast Info: A versão padrão, usada para os tipos mais comuns de feedbacks. São neutros, por isso não tem sentido positivo ou negativo. Exemplo: ID do usuário copiado.

<div class="toast is-success">
  <div class="toast-content">
    Success toast
  </div>
  <div class="toast-action">
    <button class="delete"></button>
  </div>
</div>

Toast Success: Confirmam ações com resultado positivo de uma solicitação feita pela pessoa usuária. Exemplo: Senha alterada com sucesso.

<div class="toast is-danger">
  <div class="toast-content">
    Error toast
  </div>
  <div class="toast-action">
    <button class="button is-text">Tentar novamente</button>
    <button class="delete"></button>
  </div>
</div>

Toast Error: Para casos de erro graves durante o fluxo como enviar informações em um formulário ou a falta de campos digitados. Exemplo: Erro no upload do arquivo.

Aplicação

O toast deve ser centralizado no fim da página a 32px de distância do fim da tela como mostra o exemplo a seguir:

Em telas nas quais haja uma navbar inferior, como o editor de fluxo do Zevia Flow, o toast deve contar a distância de 32px a partir dessa navbar.

A seguir um exemplo de feedbacks com toast durante um fluxo no qual o componente é usado:

Tempo em tela

São transitórios e dipensáveis. Isso quer dizer que os toasts podem ser fechados pela pessoa usuária a qualquer momento. Caso não tenha nenhuma interação, o componente perdura durante 8 segundos e desaparece.

Exemplos