Alerta (inline) CSS

O que é

É o aviso que aparece dentro da página e fica lá: "Sua assinatura vence em 3 dias", "Não foi possível salvar, confira os campos", "Frete grátis acima de R$ 199". Você coloca sw-alert numa <div> e escolhe a cor pela palavra dentro do atributo: suc (verde), err (vermelho), ale (amarelo) ou inf (azul). Dentro vão as peças que você quiser: ícone, título, mensagem, um × para fechar e uma barrinha embaixo.

É só CSS — não precisa de JavaScript para aparecer. A cor escolhida pinta a faixa da esquerda, o ícone e o título. O × de fechar é só o desenho: para ele fechar de verdade, você coloca um clique nele (uma linha, mostrada abaixo). Não confunda com o aviso que flutua no canto e some sozinho — esse é o Toast (SW.Alert).

Quando usar

• Erro vindo do servidor no topo de um formulário: "Não foi possível salvar" — sw-alert="err".
• Situação que continua valendo: "Sua assinatura vence em 3 dias" — sw-alert="ale".
• Confirmação que precisa ficar visível numa página de retorno: "Pedido recebido!" — sw-alert="suc".
• Dica ou novidade no painel: "Agora dá para exportar em PDF" — sw-alert="inf".
• Para confirmar uma ação rápida ("Salvo!") que não precisa ficar na tela, use o Toast, que some sozinho.

Comece aqui

1. 1

   Coloque o SWCore no <head> da página (uma vez só). O segundo arquivo traz os ícones swi-* usados no alerta.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.compl.min.css">

2. 2

   Escreva a caixa com a cor, o ícone e a mensagem.

   Seus dados foram salvos.

   <div sw-alert="suc">
     <i class="sw-alert-ico swi-check-circle"></i>
     <div class="sw-alert-body">
       <div class="sw-alert-msg">Seus dados foram salvos.</div>
     </div>
   </div>

3. 3

   Quer mais? Acrescente um título (sw-alert-ttl) e um × que fecha de verdade.

   Atenção

   Sua assinatura vence em 3 dias.

   ×

   <div sw-alert="ale">
     <i class="sw-alert-ico swi-error"></i>
     <div class="sw-alert-body">
       <div class="sw-alert-ttl">Atenção</div>
       <div class="sw-alert-msg">Sua assinatura vence em 3 dias.</div>
     </div>
     <button type="button" class="sw-alert-cls" aria-label="Fechar" onclick="this.closest('[sw-alert]').remove()">×</button>
   </div>

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 action="/entrar" method="post">
  <!-- aparece só quando o servidor devolve erro -->
  <div sw-alert="err">
    <i class="sw-alert-ico swi-x-circle"></i>
    <div class="sw-alert-body">
      <div class="sw-alert-ttl">Não foi possível entrar</div>
      <div class="sw-alert-msg">E-mail ou senha incorretos.</div>
    </div>
  </div>

  <div sw-fld>
    <label for="email">E-mail</label>
    <input sw-inp id="email" name="email" type="email">
  </div>
  <div sw-frm-act><button sw-btn="pri" type="submit">Entrar</button></div>
</form>

<div sw-alert="ale">
  <i class="sw-alert-ico swi-time"></i>
  <div class="sw-alert-body">
    <div class="sw-alert-ttl">Assinatura vencendo</div>
    <div class="sw-alert-msg">Seu plano vence em 3 dias. <a href="/renovar">Renovar agora</a></div>
  </div>
  <button type="button" class="sw-alert-cls" aria-label="Fechar" onclick="this.closest('[sw-alert]').remove()">×</button>
</div>

<div sw-alert="suc">
  <i class="sw-alert-ico swi-package"></i>
  <div class="sw-alert-body">
    <div class="sw-alert-msg"><strong>Frete grátis</strong> para compras acima de R$ 199 em todo o Nordeste.</div>
  </div>
</div>

<button sw-btn="pri" id="enviar">Enviar mensagem</button>
<div id="aviso"></div>

<script>
  document.getElementById('enviar').addEventListener('click', async () => {
    await fetch('/contato', { method: 'POST' });
    const alerta = document.createElement('div');
    alerta.setAttribute('sw-alert', 'suc');
    alerta.innerHTML = `
      <i class="sw-alert-ico swi-check-circle"></i>
      <div class="sw-alert-body">
        <div class="sw-alert-msg">Mensagem enviada. Respondemos em até 1 dia útil.</div>
      </div>`;
    document.getElementById('aviso').replaceChildren(alerta);
  });
</script>

Precisa de quê

• swcore.min.css — o alerta.
• swcore.compl.min.css — os ícones swi-* do alerta.

Cuidados — erros comuns

• O × (sw-alert-cls) sozinho não fecha nada. Coloque onclick="this.closest('[sw-alert]').remove()" nele.
• Faça o × com <button type="button">, não com <span>: o botão recebe foco pelo Tab e fecha com Enter (o <span> antigo tem o mesmo visual, mas não funciona no teclado).
• O ícone precisa das duas classes na mesma tag: class="sw-alert-ico swi-…". Só o swi-… fica pequeno e sem cor.
• Título e mensagem ficam dentro de <div class="sw-alert-body">. Soltos na caixa, eles ficam lado a lado com o ícone e desalinhados.
• Sem o arquivo swcore.compl.min.css, os ícones swi-* não aparecem.
• Não use alerta para tudo: se a página tem três alertas vermelhos, ninguém lê nenhum. Um por assunto, perto do que ele explica.

O que ele não faz

• Não some sozinho nem empilha mensagens no canto — para isso existe o Toast (SW.Alert).
• A barrinha (sw-alert-bar) é só enfeite: esvazia uma vez e não fecha o alerta.