Vox Mente
Navegação

Componentes

Toast

beta

Confirmação que passa e some. Nunca carregue nela informação que o usuário precise reter, nem ação que ele possa perder.

Ainda não é estável porque Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/toast

Orientação

Confirmação que passa e some. Serve para fechar um ciclo curto — “salvo” — e para nada além disso.

Quando usar

  • Uma ação terminou bem e o usuário só precisa saber que terminou.
  • O retorno é secundário: a tela já mostra o resultado, e o toast só confirma.
  • Existe uma ação de desfazer imediata e reversível, disponível também por outro caminho.

Quando não usar

  • Para informação que o usuário precisa reter. Some antes de ele ler, e não volta.
  • Para erro que exige decisão: isso fica na página, como Alert, ou no campo que falhou.
  • Como único lugar de uma ação. Quem usa leitor de tela ou navega devagar perde a janela.
Playground
toastManager.add({
  type: "success",
  title: "Trilha publicada",
  description: "Todas as turmas vinculadas já têm acesso.",
})

Uso

Toast passa e some. Ele confirma que algo aconteceu — nunca carrega informação que o usuário precise reter, nem uma ação que ele possa perder ao piscar. Se reler importa, é Alert.

Tipos

`type` decide o ícone. `success`, `info`, `warning` e `error` fecham sozinhos; `loading` com `timeout: 0` fica até você fechar ou atualizar o toast (`manager.update`).

Com ação

`actionProps` vira o botão renderizado por `ToastAction` dentro do `Toaster`. Reserve para uma ação de baixo custo e reversível — desfazer, não confirmar. Se a ação for a única forma de resolver algo importante, o toast já é a escolha errada: ele pode sumir antes do usuário clicar.

Quando não usar

Compare com Alert: os dois avisam, mas resolvem tempos diferentes.

Acessibilidade

O que o componente já garante, e o que continua sendo responsabilidade da tela.
  • É uma região viva: precisa anunciar sem roubar o foco de onde o usuário está.
  • O tempo até sumir tem que ser suficiente para ler; texto mais longo pede mais tempo, ou pede outro componente.
  • Se tem botão, o botão precisa ser alcançável por teclado antes de o toast desaparecer.

Componentes relacionados

Vizinhos que resolvem o problema parecido. Os links são resolvidos contra o registro.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Toast, ToastAction, ToastClose, ToastContent, ToastDescription, Toaster, ToastPortal, ToastProvider, ToastTitle, ToastViewport não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Orientação, acessibilidade e relacionados: documentação
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css