A lightweight, theme-aware, and customizable toast notification system — built for modern web apps.
npm install itstoasteror
yarn add itstoasterimport { Toaster } from "itstoaster";
import "itstoaster/style.css";const toast = new Toaster({
containerId: "custom-toast-container", // optional
stack: 5 // optional: max number of toasts visible at once
});toast.success({
title: "Success!",
description: "Your settings have been saved.",
duration: 3000, // optional (default: 3000ms)
dismissable: true, // optional
position: "top-right" // optional: top-left, top-center, top-right
});
toast.warning({
title: "Warning!",
description: "Your action might have unintended consequences.",
duration: 5000, // optional
dismissable: false, // optional
position: "top-center" // optional
});
toast.error({
title: "Error!",
description: "Something went wrong.",
duration: 4000, // optional
dismissable: true, // optional
position: "top-left" // optional
});
toast.info({
title: "Information",
description: "This is some informational text.",
duration: 4000, // optional
dismissable: true, // optional
position: "top-left" // optional
});| Option | Type | Default | Description |
|---|---|---|---|
title |
string | null |
null |
Optional title text |
description |
string | null |
null |
Optional description |
duration |
number | false |
3000 |
How long toast stays (in ms). Use false to disable auto-dismiss |
dismissable |
boolean |
false |
Show a close button |
position |
string |
top-right |
One of: top-left, top-center, top-right
|
icon |
string |
Based on type | Override the default icon (see below) |
- Automatically follows system theme
- To force dark mode, add to your
<html>tag:
<html data-theme="dark">| Type | Icon name |
|---|---|
| success | check_circle |
| warning | exclamation_circle |
| error | triangular_error |
| info | info_circle |
| close | cross |
✅ You can override any icon by passing a custom icon name in the icon option.
Toasts can be positioned at:
top-lefttop-center-
top-right(default)
When creating a new Toaster instance, you can pass these options:
| Option | Type | Description |
|---|---|---|
containerId |
string |
Optional ID to use for the toast container element |
stack |
number |
Max number of toasts shown at once (default: 3) |
- 🚀 Lightweight and fast
- 🎨 Light/dark/system theme support
- 📌 Position control
- 📚 Custom title & description
- 🧱 Stackable with limit
- 🧑🎨 Icon override
- ❌ Dismissable option
- ⚡ No framework needed
MIT
Made with ❤️ by @dipeshmurmu2005