# Toast Notificación efímera que comunica el resultado de una acción reciente. Aparece en una esquina y desaparece sola tras unos segundos. ```tsx import { Toaster, toast } from "sonner"; toast("Causa guardada.")}> Mostrar toast ``` ## Default ### Cuándo usar - Confirmar que una acción se completó correctamente. - Avisar de un error que no bloquea el flujo principal. - Informar de cambios que ocurrieron en segundo plano. ### Cuándo no usarlo - Si la acción requiere confirmación del usuario: usa un modal. - Si el mensaje debe persistir hasta que el usuario lo lea: usa un banner inline. - Si el contenido es largo o necesita lectura cuidadosa: usa otro patrón. ## Tipos ### Default, success, warning y error Cuatro variantes según la naturaleza del mensaje. Reserva **error** para fallas reales; usa **warning** cuando algo requiere atención pero no es bloqueante. ```tsx toast.success("Causa guardada."); toast.warning("Plazo vence mañana."); toast.error("No pudimos guardar la causa."); toast("Aviso informativo."); ``` ## Con acción ### Toast con botón de deshacer Cuando la acción es reversible, ofrece un botón **Deshacer** dentro del toast. Mantén el toast visible más tiempo para dar margen al usuario. ```tsx toast("Causa archivada.", { duration: 8000, action: { label: "Deshacer", onClick: () => toast.success("Causa restaurada."), }, }); ``` ## Stack ### Apilado con efecto profundidad Cuando llegan varios toasts en poco tiempo, el más reciente queda al frente y los anteriores se apilan hacia atrás con menor escala y opacidad. Al pasar el cursor el stack se expande para mostrarlos todos. ```tsx // Cada toast nuevo aparece arriba y empuja los anteriores // hacia atrás con scale y opacity reducidas. [1, 2, 3, 4].forEach((n, i) => setTimeout(() => toast(`Notificación ${n}`), i * 350) ); ``` ## Accesibilidad ### Anuncio y duración - Los toasts se anuncian con aria-live polite; los de error pueden usar assertive. - Duración mínima de 4 segundos para mensajes simples; más cuando hay acción. - Si hay botón de acción, debe ser alcanzable con teclado mientras el toast está visible. - El cierre automático no aplica si el cursor está sobre el toast. ## Contenido ### Texto del mensaje - Una sola frase, idealmente menos de 80 caracteres. - Comienza con el sujeto: 'Causa guardada' antes que 'Hemos guardado la causa'. - Evita exclamaciones y emojis decorativos. - Si necesitas explicar, hazlo en la siguiente vista, no en el toast.