Toast → Sonner

O componente Toast legado foi substituído por Sonner em versões recentes do shadcn/ui. Este projeto usa Sonner.

Use Sonner

Para notificações toast neste projeto, use o componente Sonner. Ele está instalado, configurado no root layout e oferece uma API mais simples com suporte a promise, ações e múltiplos tipos.

Consulte

/styleguide/components/sonner

Por que Sonner?

Vantagens de Sonner sobre o Toast legado.

API mais simples

toast.success(), toast.error() — sem boilerplate de useToast().

Promise nativa

toast.promise() gerencia loading/success/error automaticamente.

Sem Provider

Apenas adiciona <Toaster /> no layout — sem contexto extra.

Ações inline

Suporta botão de desfazer e outras ações sem configuração adicional.

Posicionamento flexível

Controle da posição via prop position no Toaster.

Tema automático

Integrado com next-themes para dark/light mode.

Migração do Toast legado

Se você tem código com o Toast antigo, aqui está como migrar.

Antes (Toast legado)

// Não use — Toast legado removido
import { useToast } from "@/components/ui/use-toast"

const { toast } = useToast()
toast({ title: "Salvo!", description: "Seu perfil foi atualizado." })

Depois (Sonner)

// Use Sonner
import { toast } from "sonner"

toast.success("Perfil atualizado!")
// ou com descrição:
toast("Salvo!", { description: "Seu perfil foi atualizado." })

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter