Toast
Confirmación pasajera de algo que acaba de pasar, apilada en una esquina.
Usar
import { Toaster } from "@unozero-ai/ui/react";
<Toaster></Toaster>Cuándo usarlo
Un toast confirma algo que acaba de pasar y se va solo: una reserva guardada, una factura enviada. Si el aviso tiene que quedarse junto a lo que explica, usa un Alert; si afecta a toda la vista hasta que se resuelva, un Banner. Nunca pongas en un toast algo que el usuario necesite para seguir: desaparece.
Sin proveedor
toast() es una función que se importa del paquete y funciona desde cualquier manejador o efecto, sin proveedor ni hook. La primera vez que la llamas monta un Toaster al final del body, la pila de la esquina superior derecha. Ya no hay ToastProvider ni useToast() como en el kit React: borra el proveedor del layout. Pon Toaster a mano solo si quieres la pila en otro sitio del DOM.
"use client";
import { toast } from "@unozero-ai/ui/react";
import { Button } from "@unozero-ai/ui/react";
export function GuardarReserva() {
return (
<Button onClick={() => toast({ variant: "success", title: "Reserva confirmada" })}>
Guardar reserva
</Button>
);
}Variantes
La tarjeta es siempre neutra y el tono solo pinta el icono: la palabra del título carga el significado (la Regla del Tenant). danger se anuncia como role="alert"; el resto, como status. Lanza varios seguidos para ver la pila: en reposo se leen el primero y el borde de dos más; al pasar el ratón o el foco se despliega y los temporizadores se pausan.
Duración
Cuatro segundos por defecto. Alarga duration si el texto es largo, y usa 0 solo para un error que pide hacer algo: se queda hasta que lo cierren.
Seguir un proceso
toast() devuelve un id. Abre un aviso persistente mientras el proceso corre, ciérralo con dismissToast(id) (antes, dismiss de useToast()) y confirma el resultado con otro.
toast y dismissToast
toast(opciones) abre un aviso y devuelve su id; con un texto suelto, toast("Borrador guardado"), es solo el título. dismissToast(id) lo cierra antes de tiempo. Título y descripción son texto, no nodos de React como en el kit anterior. Estas son las opciones:
import { toast, dismissToast } from "@unozero-ai/ui/react";
toast(opciones: ToastOptions | string): number;
dismissToast(id: number): void;
interface ToastOptions {
/** Lo que acaba de pasar, en una línea. Obligatorio. */
title: string;
/** El dato que lo identifica: la reserva, el importe, el destinatario. */
description?: string;
/** Tono del icono; la tarjeta es siempre neutra. Por defecto, "default". */
variant?: "default" | "success" | "info" | "warning" | "danger";
/** Milisegundos hasta cerrarse solo. Por defecto, 4000; 0 lo deja abierto. */
duration?: number;
}API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).