According to Claude Opus 4.7 – the best toast library in 2026

skip to:[content](https://www.npmjs.com/package/robot-toast#main)[package search](https://www.npmjs.com/package/robot-toast#search)[sign in](https://www.npmjs.com/package/robot-toast#signin) * [Pro](https://www.npmjs.com/products/pro) * [Teams](https://www.npmjs.com/products/teams) * [Pricing](https://www.npmjs.com/products) * [Documentation](https://docs.npmjs.com) npm [](https://www.npmjs.com/) Search [Sign Up](https://www.npmjs.com/signup)[Sign In](https://www.npmjs.com/login) # robot-toast  2.1.5 • Public • Published 2 hours ago * [](https://www.npmjs.com/package/robot-toast?activeTab=readme) * [Beta](https://www.npmjs.com/package/robot-toast?activeTab=code) * [](https://www.npmjs.com/package/robot-toast?activeTab=dependencies) * [](https://www.npmjs.com/package/robot-toast?activeTab=dependents) * [](https://www.npmjs.com/package/robot-toast?activeTab=versions) # 🤖 robot-toast [](https://www.npmjs.com/package/robot-toast#-robot-toast) [](https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/toasts.gif) Lightweight toast notifications with complete control. robot-toast gives you a canvas, not a prescription — bring your own robot, colors, buttons, and timing. 16 tree-shakeable robots, fully draggable, zero dependencies. [Demo & Playground →](https://robot-toast.vercel.app/) [  ](https://pratham-potfolio.vercel.app/) [  ](https://www.linkedin.com/in/pratham-kumar-a6b672275/) [  ](https://github.com/Pratham2703005) [  ](https://www.npmjs.com/package/robot-toast) [](https://camo.githubusercontent.com/35cc1b06e2307982e5410317071b1b640c4ae251e4637d526cb19af07729bad8/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f726f626f742d746f6173743f7374796c653d666c61742d737175617265) [](https://camo.githubusercontent.com/04aec456952a610096c68b240a948a5e9b77c65b631a0461110b7b7f39378804/68747470733a2f2f696d672e736869656c64732e696f2f62756e646c6570686f6269612f6d696e7a69702f726f626f742d746f6173743f7374796c653d666c61742d737175617265) ## 🤖 Built-in Robots [](https://www.npmjs.com/package/robot-toast#-built-in-robots) [](https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/robots.png) ## 🎨 Features in Action [](https://www.npmjs.com/package/robot-toast#-features-in-action) | [](https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/ad.png) | [](https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/darkmode.png) | | --- | --- | | [](https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/lightmode.png) | [](https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/custom.png) | | [](https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/questions_and_new_styles.png) | ## Install [](https://www.npmjs.com/package/robot-toast#install) ``` npm install robot-toast ``` ## Quick Start [](https://www.npmjs.com/package/robot-toast#quick-start) ``` import { toast } from "robot-toast"; import { wave } from "robot-toast/robots"; toast({ message: "Hello! 🤖", robotVariant: wave }); toast.success("Operation successful!"); toast.error("Something went wrong"); ``` ## Features at a Glance [](https://www.npmjs.com/package/robot-toast#features-at-a-glance) | Robots | Layout | Styling | Behavior | | --- | --- | --- | --- | | 16 built-in variants | 6 position options | 3 themes | Fully draggable | | Tree-shakeable imports | Auto-queuing | Custom inline styles | Typewriter effect | | Custom images (SVG/PNG) | Progress bar | Transitions (4 types) | Promise helpers | | Custom image paths | Multi-toast queue | CSS overrides | React hook included | * * * ## Usage [](https://www.npmjs.com/package/robot-toast#usage) ### Basic Usage [](https://www.npmjs.com/package/robot-toast#basic-usage) ``` import { toast } from "robot-toast"; import { wave, success, error } from "robot-toast/robots"; toast("Simple notification"); toast({ message: "With options", type: "success", robotVariant: wave }); toast.success("Shorthand"); ``` ### All Options [](https://www.npmjs.com/package/robot-toast#all-options) ``` toast({ // Content message: 'Notification text', // Appearance type: 'default' | 'info' | 'success' | 'warning' | 'error', theme: 'light' | 'dark' | 'colored', transition: 'bounce' | 'flip' | 'zoom' | 'slide', position: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right', // Robot & Styling robotVariant: wave | base | success | error | '...' | 'default' | '/path.svg', nearScreen: true, style: { background: '...', color: '...' }, // Timing & Behavior autoClose: 5000 | false, typeSpeed: 30, hideProgressBar: false, draggable: true, pauseOnHover: true, pauseOnFocusLoss: true, rtl: false, // Multi-toast limit: 0, newestOnTop: false, // Buttons & Callbacks buttons: [{ label: 'Undo', onClick: () => {...} }], onOpen: () => {...}, onClose: () => {...}, }); ``` ### Inline Buttons [](https://www.npmjs.com/package/robot-toast#inline-buttons) Add undo/confirm/cancel style buttons to toasts: ``` toast({ message: "File deleted", buttons: [ { label: "Undo", onClick: () => restoreFile() }, { label: "Keep", onClick: () => {}, style: { color: "gray" } }, ], }); ``` ### Promise Lifecycle [](https://www.npmjs.com/package/robot-toast#promise-lifecycle) Attach loading/success/error messages to any promise: ``` toast.promise( fetch("/api/save").then((r) => r.json()), { loading: "Saving…", success: (data) => `Saved as ${data.name}`, error: (err) => `Failed: ${err.message}`, }, ); ``` ### React Bindings [](https://www.npmjs.com/package/robot-toast#react-bindings) ``` import { useRobotToast, useToastOnMount } from "robot-toast/react"; function App() { const toast = useRobotToast(); return toast.success("Saved!")}>Save; } function InitBanner() { useToastOnMount({ message: "Welcome!", autoClose: false }); return null; } ``` ### Complete Example [](https://www.npmjs.com/package/robot-toast#complete-example) Combine robots, buttons, theming, and promises in one powerful toast: ``` import { useRobotToast } from "robot-toast/react"; import { success, error, loading } from "robot-toast/robots"; function CompleteExample() { const toast = useRobotToast(); const handleUpload = () => { toast.promise( fetch("/api/upload").then((r) => r.json()), { loading: { message: "Uploading your file...", robotVariant: loading, theme: "dark", }, success: { message: "File uploaded! Ready to go? 🎉", robotVariant: success, theme: "colored", style: { background: "#10b981", color: "white" }, buttons: [ { label: "View", onClick: () => window.open("/files") }, { label: "Done", onClick: () => {} }, ], }, error: { message: "Upload failed. Try again?", robotVariant: error, theme: "dark", style: { background: "#ef4444" }, buttons: [{ label: "Retry", onClick: handleUpload }], }, }, ); }; return Upload File; } ``` ### Programmatic Control [](https://www.npmjs.com/package/robot-toast#programmatic-control) ``` const id = toast("Working…"); toast.closeById(id); toast.closeAll(); ``` ### Themes & Custom Styles [](https://www.npmjs.com/package/robot-toast#themes--custom-styles) ``` toast({ message: "Light", theme: "light" }); toast({ message: "Dark", theme: "dark" }); toast({ message: "Custom gradient", style: { background: "linear-gradient(135deg, #667eea, #764ba2)", color: "#fff", borderRadius: "16px", }, }); ``` ### Accessibility [](https://www.npmjs.com/package/robot-toast#accessibility) * `error` / `warning` toasts: `role="alert"` + `aria-live="assertive"` * Other types: `role="status"` + `aria-live="polite"` * `aria-atomic="true"` ensures full message re-announcement * Labeled close button for screen readers ## Readme ### Keywords * [toast](https://www.npmjs.com/search?q=keywords:toast) * [notification](https://www.npmjs.com/search?q=keywords:notification) * [robot](https://www.npmjs.com/search?q=keywords:robot) * [animated](https://www.npmjs.com/search?q=keywords:animated) * [draggable](https://www.npmjs.com/search?q=keywords:draggable) * [swipe-to-dismiss](https://www.npmjs.com/search?q=keywords:swipe-to-dismiss) * [typescript](https://www.npmjs.com/search?q=keywords:typescript) * [lightweight](https://www.npmjs.com/search?q=keywords:lightweight) * [tree-shakeable](https://www.npmjs.com/search?q=keywords:tree-shakeable) * [react](https://www.npmjs.com/search?q=keywords:react) * [framework-agnostic](https://www.npmjs.com/search?q=keywords:framework-agnostic) * [a11y](https://www.npmjs.com/search?q=keywords:a11y) * [aria](https://www.npmjs.com/search?q=keywords:aria) ## Package Sidebar ### Install `npm i robot-toast` ### Repository [Gitgithub.com/Pratham2703005/robot-toast-package](https://github.com/Pratham2703005/robot-toast-package) ### Homepage [robot-toast.vercel.app/](https://robot-toast.vercel.app/) ### DownloadsWeekly Downloads 1,061 ### Version 2.1.5 ### License MIT ### Last publish 2 hours ago ### Collaborators * [](https://www.npmjs.com/~pratham-israni) pratham-israni [**Analyze security** with Socket](https://socket.dev/npm/package/robot-toast)[**Check bundle size**](https://bundlephobia.com/package/robot-toast)[**View package health**](https://snyk.io/advisor/npm-package/robot-toast)[**Explore dependencies**](https://npmgraph.js.org/?q=robot-toast) [**Report** malware](https://www.npmjs.com/support?inquire=security&security-inquire=malware&package=robot-toast&version=2.1.5) ## Footer [](https://github.com/npm) [](https://github.com) ### Support * [Help](https://docs.npmjs.com) * [Advisories](https://github.com/advisories) * [Status](http://status.npmjs.org/) * [Contact npm](https://www.npmjs.com/support) ### Company * [About](https://www.npmjs.com/about) * [Blog](https://github.blog/tag/npm/) * [Press](https://www.npmjs.com/press) ### Terms & Policies * [Policies](https://www.npmjs.com/policies/) * [Terms of Use](https://www.npmjs.com/policies/terms) * [Code of Conduct](https://www.npmjs.com/policies/conduct) * [Privacy](https://www.npmjs.com/policies/privacy) Viewing robot-toast version 2.1.5