Toast

Feedback

Notificação temporária no canto da tela, com a identidade TRDR já aplicada e cores por tipo (sucesso, erro, aviso, info).

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Sonner } from "@trdr/ui/sonner"

Uso

import { Toaster } from "@trdr/ui/sonner"

export function Exemplo() {
  return <Sonner />
}

Props

SonnerProps

Prop	Tipo	Descrição
id?	ToasterProps["id"]	Identificador deste Toaster, util quando o app monta mais de um.
invert?	ToasterProps["invert"]	Inverte as cores do tema (claro dentro de escuro ou vice-versa) so no toast.
theme?	ToasterProps["theme"]	Tema visual dos toasts.
position?	ToasterProps["position"]	Canto da tela onde os toasts aparecem.
hotkey?	ToasterProps["hotkey"]	Atalho de teclado que foca a regiao de toasts.
richColors?	ToasterProps["richColors"]	Liga a cor propria de cada tipo (sucesso/erro/aviso/info) em vez da cor neutra unica.
expand?	ToasterProps["expand"]	Expande todos os toasts empilhados por padrao, em vez de agrupa-los recolhidos.
duration?	ToasterProps["duration"]	Duracao padrao (ms) antes do toast fechar sozinho.
gap?	ToasterProps["gap"]	Espaco (px) entre toasts empilhados.
visibleToasts?	ToasterProps["visibleToasts"]	Quantidade maxima de toasts visiveis ao mesmo tempo.
closeButton?	ToasterProps["closeButton"]	Mostra um botao de fechar em cada toast.
toastOptions?	ToasterProps["toastOptions"]	Opcoes padrao aplicadas a todo toast (classNames, estilos, duracao etc).
className?	ToasterProps["className"]	Classe do container que envolve todos os toasts.
style?	ToasterProps["style"]	Estilo inline do container; usado aqui para injetar as variaveis CSS de tema.
offset?	ToasterProps["offset"]	Distancia (px) do container ate as bordas da tela em telas largas.
mobileOffset?	ToasterProps["mobileOffset"]	Mesmo que `offset`, mas so para telas de celular.
dir?	ToasterProps["dir"]	Direcao de texto dos toasts.
swipeDirections?	ToasterProps["swipeDirections"]	Direcoes de arraste permitidas para descartar um toast.
icons?	ToasterProps["icons"]	Icones customizados por tipo de toast.
containerAriaLabel?	ToasterProps["containerAriaLabel"]	Rotulo acessivel da regiao de notificacoes.

Quando usar

Use o toast para confirmar o resultado de uma acao que o usuario acabou de disparar e que nao precisa de uma decisao (ordem enviada, ordem executada, erro ao salvar uma preferencia). Ele aparece, informa, e some sozinho. Monte um unico <Toaster /> na raiz do app; a partir dai, qualquer parte do codigo dispara notificacoes chamando toast(...).

Quando nao usar

Nao use toast para erros que bloqueiam o fluxo ou que exigem uma decisao do usuario (saldo insuficiente para uma ordem que precisa de outra acao imediata, confirmacao de uma operacao irreversivel): isso e Dialog ou Alert na propria tela, nao uma notificacao que desaparece sozinha. Tambem nao empilhe toasts para o mesmo evento repetido rapidamente (varias ordens executadas em sequencia): prefira agrupar em uma unica notificacao.

Uso

import { toast } from "@trdr/ui/sonner"

toast("Ordem enviada para o book.")
toast.success("Ordem executada", { description: "0.42 BTC comprado a mercado." })
toast.error("Falha ao enviar ordem", { description: "Saldo insuficiente." })
toast.warning("Margem baixa", { description: "Margem disponivel abaixo de 10%." })

O Toaster exportado por @trdr/ui/sonner ja e escuro por padrao e ja liga richColors: isso e o que faz toast.success/toast.error/toast.warning saírem com a superficie, a borda e o texto na cor certa (text-content-success, text-content-error, text-content-warning, text-content-info) sem o consumidor configurar nenhuma cor. toast e useSonner sao reexportados daqui, entao a aplicacao nao precisa depender do pacote sonner diretamente.

Anatomia

Toaster (data-slot="sonner"): monta uma vez, normalmente no layout raiz. Encapsula o Toaster do pacote sonner, com o tema TRDR ja aplicado.
toast, useSonner: reexportados do pacote sonner sem alteracao, para disparar e observar notificacoes de qualquer lugar do app.

Como a cor e aplicada

O sonner define a cor do toast atraves de variaveis CSS proprias (--normal-bg, --success-text e por ai vai), porque as regras internas dele usam seletores de atributo encadeados com mais especificidade do que uma classe utilitaria isolada conseguiria sobrescrever sem !important (proibido no CONTRACT). Por isso o Toaster daqui redefine essas variaveis apontando para os tokens TRDR (var(--color-popover), var(--color-content-success)...) via style, no lugar de tentar via toastOptions.classNames. E o unico mecanismo garantido de recolorir o componente sem depender de !important.

Lacuna conhecida: o texto de descricao do toast, no tema escuro do sonner, usa uma cor propria fixa (#e8e8e8) quando o toast nao esta em modo "rich colors" para aquele tipo especifico; com richColors ligado (o padrao daqui) o texto passa a herdar a cor do tipo corretamente, mas o botao de cancelar (cancelButton) ainda usa uma sobreposicao translucida fixa do proprio pacote, nao redirecionavel por token. Visualmente aceitavel, mas registrado aqui para quem for revisar pixel a pixel.

Acessibilidade

O container de toasts e uma regiao com aria-live="polite" e aria-atomic, gerenciada pelo proprio sonner: leitores de tela anunciam o toast sem interromper o que o usuario esta fazendo. Evite depender so de cor para diferenciar sucesso de erro: o titulo do toast deve dizer o que aconteceu em palavras (a mensagem, nao so o tom da superficie).

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="sonner"]

0 tokens usados