fn_registry/frontend/functions/ui/toast.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
toast	component	ts	ui	1.0.0	impure	Toast(props: ToastProps): JSX.Element	Notificaciones temporales con variantes semanticas (success, error, warning, info), iconos automaticos, auto-dismiss y provider con hook useToast.	toast notification alert component ui interactive cva	cn_ts_core			false		class-variance-authority lucide-react	Componente Toast que renderiza notificación temporal con variantes semánticas, auto-dismiss y hook useToast	false			frontend/functions/ui/toast.tsx	name type required description variant 'default' | 'success' | 'error' | 'warning' | 'info' false Variante semantica con icono automatico (default: default) name type required description title string false Titulo de la notificacion name type required description description string false Texto descriptivo secundario name type required description action React.ReactNode false Accion opcional (boton, link) debajo del contenido name type required description onClose () => void false Callback al cerrar. Muestra el boton X si se provee. name type required description duration number false Duracion en ms antes del auto-dismiss (default: 5000, 0 = persistente)	onClose	true	react	default success error warning info

Ejemplo

// 1. Envolver la app con el provider
<ToastProvider position="bottom-right">
  <App />
</ToastProvider>

// 2. Usar el hook en cualquier componente
function MyComponent() {
  const { toast } = useToast()

  return (
    <Button onClick={() => toast({
      variant: "success",
      title: "Guardado",
      description: "Los cambios se guardaron correctamente.",
    })}>
      Guardar
    </Button>
  )
}

// Toast con accion
toast({
  variant: "error",
  title: "Error al guardar",
  description: "Intenta de nuevo.",
  action: <Button size="sm" variant="outline">Reintentar</Button>,
  duration: 0, // persistente hasta cerrar manualmente
})

// Toast individual sin provider
<Toast variant="info" title="Informacion" description="Texto descriptivo" onClose={() => {}} />

Notas

Arquitectura: Toast (componente visual puro), ToastViewport (contenedor posicionado fixed), ToastProvider (context + logica de estado), useToast (hook consumidor). Los iconos son automaticos segun variante: CheckCircle2 (success), AlertCircle (error), AlertTriangle (warning), Info (info). El border-l-4 diferencia visualmente cada variante. ToastProvider acepta position con 6 posiciones predefinidas.