Toast (SW.Alert) JavaScript

O que é

É a mensagem rápida que confirma que algo aconteceu, sem tirar a pessoa do que ela estava fazendo. Ela aparece por cima da página, fica alguns segundos com uma barrinha mostrando o tempo, e some. Você dispara de dois jeitos: por atributo num botão (sw-toast="ok" + a mensagem) ou por JavaScript (SW.Alert.ok('Salvo!')) — o segundo é o mais comum, depois de salvar um formulário. O mesmo módulo tem a caixa de confirmação (SW.Alert.confirmar) para ações perigosas.

Precisa do JavaScript do SW Core (o visual vem junto com o script, não precisa de CSS a mais). O ícone de cada tipo é um swi-*, que vem no pacote complementar. Vários avisos seguidos se empilham no mesmo canto. Clicar no aviso (ou no ×) fecha antes da hora. O aviso é sempre escuro e translúcido, então fica legível tanto no tema claro quanto no escuro.

Quando usar

• Confirmar que deu certo depois de salvar, enviar, copiar: SW.Alert.ok('Dados salvos').
• Avisar que falhou (sem internet, servidor fora): SW.Alert.err(…).
• Pedir confirmação antes de excluir ou cancelar: SW.Alert.confirmar(…).
• Aviso que precisa ficar na tela até a pessoa resolver (ex.: "complete seu cadastro"): use o Alerta (inline), que fica no meio da página.

Comece aqui

1. 1

   Coloque o SW Core na página. O CSS complementar traz os ícones do aviso.

   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.compl.min.css">
   
   <!-- fim do body -->
   <script src="swcore/swcore.min.js"></script>

2. 2

   Jeito 1 — por atributo: o botão mostra o aviso quando é clicado.

   Enviar pedido

   <button sw-btn="suc" sw-toast="ok" sw-toast-msg="Seu pedido foi enviado!">Enviar pedido</button>

3. 3

   Jeito 2 — por JavaScript, depois que algo acontece de verdade (ex.: o servidor respondeu).

   Salvar cadastro

   <script>
     SW.Alert.ok('Cadastro salvo com sucesso!');
   </script>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<form id="contato">
  <input sw-inp type="email" name="email" placeholder="seu@email.com" aria-label="E-mail" required>
  <button sw-btn="pri" type="submit">Quero ser contatado</button>
</form>

<script>
  document.getElementById('contato').addEventListener('submit', async (e) => {
    e.preventDefault();
    try {
      const r = await fetch('/contato', { method: 'POST', body: new FormData(e.target) });
      if (!r.ok) throw new Error();
      SW.Alert.ok('Recebemos seu contato. Respondemos em até 1 dia útil.', 5000, 'tr', 'Mensagem enviada');
      e.target.reset();
    } catch (_) {
      SW.Alert.err('Não foi possível enviar. Tente de novo.');
    }
  });
</script>

<button sw-btn="out" id="copiar"><i class="swi-copy"></i> Copiar link</button>

<script>
  document.getElementById('copiar').addEventListener('click', async () => {
    await navigator.clipboard.writeText(location.href);
    SW.Alert.ok('Link copiado!', 1500, 'bc');
  });
</script>

<button sw-btn="err out" id="excluir"><i class="swi-trash"></i> Excluir cliente</button>

<script>
  document.getElementById('excluir').addEventListener('click', () => {
    SW.Alert.confirmar(
      'O cliente Ana Souza e todo o histórico dela serão apagados.',
      async (ok) => {
        if (!ok) return;
        await fetch('/clientes/12', { method: 'DELETE' });
        SW.Alert.ok('Cliente excluído.');
      },
      'Excluir cliente?',
      'swi-trash'
    );
  });
</script>

SW.Alert.ok('Foto 1 enviada');
SW.Alert.ok('Foto 2 enviada');
SW.Alert.ale('Foto 3 muito grande, ignorada');
// cada um some no seu tempo; os de baixo sobem

API (JavaScript)

Precisa de quê

• swcore.min.js — o visual do aviso vem dentro do próprio script.
• swcore.compl.min.css — os ícones dos avisos e da confirmação.

Cuidados — erros comuns

• Ordem dos valores no JavaScript: é (mensagem, tempo, canto, título). Escrever SW.Alert.ok('Salvo', 'Pronto') põe "Pronto" no lugar do tempo — o aviso fica na tela para sempre e o título não aparece. Com título: SW.Alert.ok('Salvo', 4000, 'tr', 'Pronto').
• Esperar a resposta com await SW.Alert.confirmar(…): não funciona. A resposta chega na função que você passa.
• Mostrar o "deu certo" antes de o servidor responder: se falhar depois, a pessoa foi enganada. Chame SW.Alert.ok só depois do fetch dar certo.
• Usar aviso passageiro para erro que a pessoa precisa corrigir num campo: ela não vê a tempo. Mostre o erro junto do campo (ver Validação) e use o aviso só como reforço.

O que ele não faz

• É passageiro e flutuante. Para aviso fixo dentro da página, use o Alerta (inline).
• A caixa de confirmação tem sempre os botões "Confirmar" e "Cancelar" — o texto deles não muda.
• Não tem botão de ação dentro do aviso (ex.: "Desfazer").
• O visual é sempre escuro translúcido, nos dois temas — não segue a cor primária do site.