Toast (Sonner)

Core Idea

A página /docs/components/sonner no texto-fonte atual espelha o conteúdo de Toast: shadcn/ui migrou o componente de notificações para a implementação baseada em Base UI (toast.add), substituindo a antiga integração com a lib Sonner. Trate sonner como um alias histórico do componente Toast.

Key Concepts

• Mesma API que Toast: toast.add, toast.close, toast.promise, <Toaster />.
• type: "success" | "info" | "warning" | "error" | "loading".
• actionProps: renderiza um botão de ação dentro do toast.

Code Examples

"use client"

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

export function ToastTypes() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button variant="outline" onClick={() => toast.add({ description: "Event has been created." })}>
        Default
      </Button>
      <Button
        variant="outline"
        onClick={() => toast.add({ type: "success", description: "Event has been created." })}
      >
        Success
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast.add({ type: "error", description: "The event could not be created.", priority: "high" })
        }
      >
        Error
      </Button>
    </div>
  )
}

• O que demonstra: os 5 tipos de toast (default, success, info, warning, error), cada um com ícone de status próprio.

Reference Tables

Instalação	Comando
CLI	npx shadcn@latest add toast
Manual	npm install @base-ui/react + copiar components/ui/toast.tsx

Anti-patterns

• Procurar por sonner como pacote npm separado: a implementação atual do shadcn/ui não depende da lib sonner; o import é @/components/ui/toast.

Key Takeaways

1. Se a documentação ou um projeto legado referenciar "Sonner", verifique se já não migrou para o Toast baseado em Base UI.
2. A instalação e a API são idênticas às de ch056-components-toast.
3. Não crie dois componentes (sonner.tsx e toast.tsx) achando que são coisas diferentes.

Connects To

• Toast (ch056): mesma implementação; consulte lá para detalhes completos de API.