Feedback

Sonner

Sistema de toasts empilháveis sobre a lib sonner. Renderize o <Toaster /> uma vez na raiz e dispare com toast() — success, error, promise e mais. O tema acompanha a classe .light do <html> e as cores usam os tokens da marca.


npx shadcn add @studio/sonner

Baseado em sonner — acessível por teclado e leitores de tela.

Anatomia dos toasts

Alterações salvas

Seu perfil foi atualizado com sucesso.

Falha ao publicar

Verifique sua conexão e tente novamente.

Uso

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

// 1. Renderize uma vez na raiz da app
<Toaster richColors closeButton />

// 2. Dispare de qualquer lugar
toast.success("Alterações salvas");
toast.error("Falha ao publicar");
toast.promise(salvar(), {
  loading: "Salvando…",
  success: "Pronto!",
  error: "Algo deu errado",
});

Wrapper sobre a lib sonner — o tema acompanha a classe .light do <html> e as cores usam os tokens da marca.

Props

Prop	Tipo	Default	Descrição
`position`	`'top-right'\|'bottom-right'\|...`	`'bottom-right'`	Canto onde os toasts aparecem
`richColors`	`boolean`	`false`	Cores semânticas por tipo de toast
`closeButton`	`boolean`	`false`	Exibe botão de fechar em cada toast