Toast
Cartão de notificação sobre o sonner. A superfície é sempre neutra e o tom muda só o ícone, para o feedback não competir com o documento.
Tons
info, success, warning, caution e danger, além do neutro.
Com ações
Uma ação fica ao lado do título. Com cancel, as duas descem para o rodapé.
Cartão estático
ToastCard pode ser usado fora do sonner para documentar ou pré-visualizar.
Lembrete agendado
Rafael Nogueira recebe um e-mail amanhã às 9h.
há 2 min
Documento assinado
Mariana Albuquerque assinou o contrato às 09:12.
há 2 min
Envelope expira em 2 dias
Faltam 2 assinaturas no ENV-2026-1042.
há 2 min
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| toast.info / success / warning / caution / danger | (options: ToastOptions) => id | — | Dispara o cartão no tom indicado. toast(...) é o neutro e toast.error é sinônimo de danger. |
| title | ReactNode | — | Linha principal. |
| description | ReactNode | — | Detalhe em text-body-sm. |
| icon | ReactNode | — | Troca o ícone padrão do tom. |
| meta | ReactNode | — | Texto curto à direita, como "agora". |
| action / cancel | { label, onClick?, tone?, startIcon?, endIcon? } | — | Botões. tone: primary, secondary ou danger. Fecham o toast ao clicar. |
| dismissible | boolean | true | Mostra o botão de fechar. |
| duration / position / id | ExternalToast | — | Opções repassadas ao sonner. |
| toast.dismiss / promise / loading / custom | sonner | — | Métodos nativos do sonner. |
<Toaster />
toast.success({ title: "Documento assinado", description: "Mariana Albuquerque assinou às 09:12." });
toast.danger({ title: "Falha ao enviar", action: { label: "Tentar de novo", onClick: retry } });