Visão geral

Clique nos botões abaixo para ver os diferentes tipos de toast. O Toaster já está configurado no root layout.

Demo — clique para disparar toasts

Setup no layout

// src/app/layout.tsx import { Toaster } from "@/components/ui/sonner" <body> {children} <Toaster /> </body>

Import para uso

import { toast } from "sonner"

Tipos de toast

O Sonner tem funções específicas para cada tipo de notificação.

toast(msg)

Toast padrão neutro.

toast.success(msg)

Operação concluída com sucesso.

toast.error(msg)

Erro ou falha na operação.

toast.warning(msg)

Aviso não-crítico.

toast.info(msg)

Informação contextual.

toast.loading(msg)

Indicador de carregamento assíncrono.

toast.promise(promise, opts)

Toast que reage ao estado de uma Promise.

Padrão de implementação

Snippets para os usos mais comuns do Sonner.

Toast simples

import { toast } from "sonner"

// Em qualquer componente cliente:
toast("Mensagem salva!")
toast.success("Usuário criado com sucesso!")
toast.error("Não foi possível excluir o registro.")

Toast com ação

toast("Arquivo excluído", {
  description: "O arquivo foi movido para a lixeira.",
  action: {
    label: "Desfazer",
    onClick: () => restaurarArquivo(),
  },
})

Toast de Promise

toast.promise(salvarDados(dados), {
  loading: "Salvando...",
  success: (resultado) => `${resultado.nome} salvo!`,
  error: (err) => `Erro: ${err.message}`,
})

Toast customizado

toast("Notificação", {
  duration: 5000,    // duração em ms (padrão: 4000)
  position: "top-right",
  dismissible: true,
  icon: <BellIcon className="size-4" />,
})

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