componentes / toast

Toast

Notificações temporárias disparadas de qualquer lugar com toast(), renderizadas por um único Toaster.

Como usar

Monte `<Toaster />` uma vez perto da raiz e chame `toast({ ... })` (ou `useToast()`) em qualquer lugar; retorna o id, e `toast.dismiss(id)` fecha. Os toasts se empilham numa região em portal, fecham sozinhos após `duration` (5000 ms) e pausam com hover ou foco; `Esc` fecha o focado. `warning` e `danger` são anunciados de forma assertiva.

preview

Toast.tsx

import { Toaster, toast } from "vaiperui";
 
// once, at the app root
<Toaster position="top-right" />
 
toast({ variantColor: "success", title: "Salvo", description: "Suas alterações foram salvas." })
toast({
  description: "Item removido.",
  action: { label: "Desfazer", onClick: restore },
})

Cores

preview

variantColor

cores.tsx

toast({ variantColor: "primary", description: "primary" })
toast({ variantColor: "success", description: "success" })
toast({ variantColor: "warning", description: "warning" })
toast({ variantColor: "danger", description: "danger" })

Persistente e personalizado

preview

duration: 0

persistente.tsx

toast({ description: "...", duration: 0 })
toast({ customColor: "#8b5cf6", description: "Violeta" })

Props

Prop	Valores	Padrão	Descrição
position	top-left \| top-center \| top-right \| bottom-left \| bottom-center \| bottom-right	top-right	Toaster: onde a pilha fica
limit	number	5	Toaster: máximo de toasts visíveis
duration	number	5000	Padrão do Toaster, ou por toast: ms até fechar sozinho; 0 mantém até fechar
label	string	Notifications	Toaster: nome acessível da região
dismissLabel	string	Dismiss	Toaster: nome acessível dos botões de fechar
radius	none \| sm \| md \| lg \| full	lg	Toaster: arredondamento dos cantos
title / description	ReactNode	nenhum	toast(): o conteúdo (uma string simples vira a descrição)
variantColor / customColor	primary \| success \| warning \| danger / CSS color	primary	toast(): cor; customColor a substitui
icon	ReactNode \| false	ícone de status	toast(): seu ícone, ou false para ocultar
action	{ label, onClick }	nenhum	toast(): botão de ação; também fecha o toast
dismissible	boolean	true	toast(): mostrar o botão de fechar
id / onClose	string / () => void	nenhum	toast(): id repetido substitui o toast; onClose roda ao fechar

Acessibilidade

`Toaster` renderiza uma `<section>` com `aria-label` vindo de `label` (padrão "Notifications") dentro de um portal no `document.body`.
Cada toast é sua própria região live: `role="alert"` para `warning` e `danger`, `role="status"` para `primary` e `success`.
O toast nunca recebe foco ao aparecer, então não interrompe a digitação nem a navegação.
O timer de fechamento automático pausa com o ponteiro sobre o toast, com o foco dentro dele e com a aba oculta; depois retoma com o tempo restante.
O botão de fechar é um `<button>` real com `aria-label` vindo de `dismissLabel` (padrão "Dismiss"); `dismissible: false` o remove.
A `action` de um toast é um `<button>` real que executa `onClick` e depois fecha o toast.

Teclado

Tecla	Ação
Esc	Fecha o toast que contém o foco.
Tab / Shift+Tab	Move entre a ação e o botão de fechar do toast; o foco pausa o timer.

Tenha em mente

Como toasts não recebem foco e podem sumir, usuários de teclado e leitores de tela podem perdê-los: nunca use um toast como único meio de transmitir informação essencial ou um erro.
`Esc` só funciona quando o foco está dentro de um toast; não há atalho global para alcançar ou fechar toasts.
Traduza `label` e `dismissLabel` você mesmo; os padrões são em inglês. Dê a toasts com `action` um `duration` longo ou infinito (`0`).