componentes / toast

Toast

Notificaciones temporales disparadas desde cualquier lugar con toast(), renderizadas por un único Toaster.

Cómo usar

Monta `<Toaster />` una vez cerca de la raíz y llama `toast({ ... })` (o `useToast()`) desde cualquier lugar; devuelve el id, y `toast.dismiss(id)` lo cierra. Los toasts se apilan en una región en portal, se cierran solos tras `duration` (5000 ms) y se pausan con hover o foco; `Esc` cierra el enfocado. `warning` y `danger` se anuncian de forma asertiva.

preview

Toast.tsx

import { Toaster, toast } from "vaiperui";
 
// once, at the app root
<Toaster position="top-right" />
 
toast({ variantColor: "success", title: "Guardado", description: "Tus cambios se guardaron." })
toast({
  description: "Elemento eliminado.",
  action: { label: "Deshacer", onClick: restore },
})

Colores

preview

variantColor

colores.tsx

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

Persistente y personalizado

preview

duration: 0

persistente.tsx

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

Props

Prop	Valores	Predeterminado	Descripción
position	top-left \| top-center \| top-right \| bottom-left \| bottom-center \| bottom-right	top-right	Toaster: dónde queda la pila
limit	number	5	Toaster: máximo de toasts visibles
duration	number	5000	Predeterminado del Toaster, o por toast: ms hasta cerrarse; 0 lo mantiene hasta cerrar
label	string	Notifications	Toaster: nombre accesible de la región
dismissLabel	string	Dismiss	Toaster: nombre accesible de los botones de cerrar
radius	none \| sm \| md \| lg \| full	lg	Toaster: redondeo de las esquinas
title / description	ReactNode	ninguno	toast(): el contenido (un string simple es la descripción)
variantColor / customColor	primary \| success \| warning \| danger / CSS color	primary	toast(): color; customColor lo reemplaza
icon	ReactNode \| false	icono de estado	toast(): tu icono, o false para ocultarlo
action	{ label, onClick }	ninguno	toast(): botón de acción; también cierra el toast
dismissible	boolean	true	toast(): mostrar el botón de cerrar
id / onClose	string / () => void	ninguno	toast(): un id repetido reemplaza el toast; onClose se ejecuta al cerrar

Accesibilidad

`Toaster` renderiza una `<section>` con `aria-label` tomado de `label` (por defecto "Notifications") dentro de un portal en `document.body`.
Cada toast es su propia región live: `role="alert"` para `warning` y `danger`, `role="status"` para `primary` y `success`.
El toast nunca recibe el foco al aparecer, así que no interrumpe la escritura ni la navegación.
El temporizador de cierre automático se pausa con el puntero sobre el toast, con el foco dentro y con la pestaña oculta; luego sigue con el tiempo restante.
El botón de cerrar es un `<button>` real con `aria-label` tomado de `dismissLabel` (por defecto "Dismiss"); `dismissible: false` lo quita.
La `action` de un toast es un `<button>` real que ejecuta `onClick` y luego cierra el toast.

Teclado

Tecla	Acción
Esc	Cierra el toast que contiene el foco.
Tab / Shift+Tab	Mueve entre la acción y el botón de cerrar del toast; el foco pausa su temporizador.

Ten en cuenta

Como los toasts no reciben foco y pueden desaparecer, usuarios de teclado y lectores de pantalla pueden perdérselos: nunca uses un toast como único medio para transmitir información esencial o un error.
`Esc` solo funciona cuando el foco está dentro de un toast; no hay atajo global para alcanzar o cerrar toasts.
Traduce `label` y `dismissLabel` tú mismo; los valores por defecto están en inglés. Da a los toasts con `action` un `duration` largo o infinito (`0`).