SweetAlert2
O que é
Biblioteca de alertas/toasts. Aqui é usada em dois wrappers:
Toast para feedback sem bloqueio e confirmDialog para confirmação
destrutiva.
Por que essa
O feedback de formulário é sempre via toast, nunca banner
fixo dentro do formulário. Os formulários de autenticação usavam banner
inline e foram convertidos pra toast + form.setError() no campo relevante
quando faz sentido (login marca "senha" como inválido sem repetir a
mensagem, que já foi pro toast). Leitura de apoio:
documentação oficial do SweetAlert2 — por
que centralizar feedback em toast/confirmação em vez de banner inline.
Versão
^11.26.25 (package.json).
Como importar
pnpm add sweetalert2
Não se importa sweetalert2 direto nos componentes — sempre pelos wrappers
do projeto, que já fixam posição, estilo, duração e botões:
import { confirmDialog, Toast } from "@/shared/ui";
Exemplo real — Toast
shared/ui/sistema/toast.tsx:
export const Toast = {
success: (input: ToastInput) => Toast.fire({ ...normalize(input), icon: "success" }),
error: (input: ToastInput) => Toast.fire({ ...normalize(input), icon: "error" }),
warning: (input: ToastInput) => Toast.fire({ ...normalize(input), icon: "warning" }),
info: (input: ToastInput) => Toast.fire({ ...normalize(input), icon: "info" }),
};
Uso real (features/autenticacao/login/hooks/use-login-form.ts):
if (!resultado.ok) {
void Toast.error({ title: "Não foi possível entrar", description: resultado.message });
form.setError("password", { message: " " });
return;
}
void Toast.success({ title: "Sessão iniciada", description: nome ? `Bem-vindo, ${nome}` : undefined });
void na frente porque Toast.success/.error devolvem uma Promise do
SweetAlert2 que ninguém precisa aguardar (o toast já fecha sozinho).
Exemplo real — Confirmação destrutiva
shared/ui/sistema/confirm-dialog.ts:
const confirmado = await confirmDialog({
title: "Excluir usuário",
text: "Essa ação não pode ser desfeita.",
icon: "warning",
confirmButtonText: "Excluir",
confirmVariant: "destructive",
});
if (confirmado) excluir(usuario.id);
Regra: exclusão e ação irreversível não usam window.confirm; usam
confirmDialog.

