Componentes

Sonner

Toasts efêmeros de sucesso, erro ou info.

Feedback e estados

Carregando demonstração…

Código da demo
"use client";

import { toast } from "sonner";
import { Button } from "@/components/ui/button";

export function Demo() {
  return (
    <div className="flex flex-wrap gap-fe-2">
      <Button onClick={() => toast("Evento registrado")}>Default</Button>
      <Button
        variant="outline"
        onClick={() => toast.success("Salvo com sucesso")}
      >
        Success
      </Button>
      <Button
        variant="destructive"
        onClick={() => toast.error("Falha ao salvar")}
      >
        Error
      </Button>
    </div>
  );
}

Use

  • Confirmar algo que já aconteceu: “Salvo”.
  • Oferecer desfazer quando a operação é reversível.

Não use

  • Erro que exige ação: mostre no campo ou em Alert.
  • Não empilhe vários toasts para a mesma ação.
Acessibilidade
Toasts anunciados; Toaster no layout raiz.
Importar
import { Toaster } from "@financeequity/ui/sonner"

Neste repositório:

import { toast } from "sonner"
import { Toaster } from "@/components/ui/sonner"
Dependências
sonner