Zero Dependencies. Pure JavaScript.

not-a-toast

A beautiful, lightweight, & customizable toast notification library designed for modern web apps.

Get Started Read Docs

Installation

Add `not-a-toast` to your project using either npm or by including it directly from a CDN.

Via npm

This is the recommended method for modern web applications.

Install the package:

npm install not-a-toast

Import and use it in your project:

// 1. Import the toast function and its stylesheet
import toast from 'not-a-toast';
import 'not-a-toast/style.css';

// 2. Use it in your application
toast({ message: 'Hello from npm! 👋' });

Via CDN

Use this method for quick demos or projects without a build step. This will make the `toast()` function globally available in your script.

<!DOCTYPE html>
<html>
<head>
  <title>Not-a-Toast Demo</title>
  <!-- Stylesheet CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/not-a-toast@1.1.5/dist/style.css">
</head>
<body>
  <button onclick="showMyToast()">Show Toast!</button>
  <!-- Script CDN -->
  <script src="https://cdn.jsdelivr.net/npm/not-a-toast@1.1.5/dist/not-a-toast.umd.js"></script>
  <script>
    function showMyToast() {
      toast({ message: 'Hello from the CDN! 🚀' });
    }
  </script>
</body>
</html>

Why use not-a-toast?

Packed with features to create engaging and informative notifications that seamlessly integrate with your UI.

🎨

40+ Built-in Themes

From glassmorphism to retro pixel, choose from a huge variety of themes or create your own.

🎬

33 Entry & Exit Animations

Over 30 slick entry and exit animations to bring your notifications to life.

⚙️

Fully Customizable

Control everything: duration, position, progress bars, buttons, icons, and custom styling.

🔄

Update Support

Dynamically update a toast's content, theme, and behavior after it has been displayed.

💡

Promise (Async) Support

Easily handle async operations with built-in support for loading, success, and error states.

🧩

Custom HTML Content

For ultimate flexibility, use your own custom HTML structure within the toast body.

Live Demos

Interact with the options below to see `not-a-toast` in action. The code snippets update automatically!

Basic Options

autoClose and pauseOnHover are set to true by default, so you don’t need to specify autoClose: true or pauseOnHover: true in the options

Duration (in ms)

Auto Close Pause on Hover

Multiline Toast

Display messages across multiple lines using the `\n` character.

Positioning

Display toasts in any of the six available screen positions.

Reverse toast order

Themes

Choose from over 40 built-in themes to match your application's style.

Select a theme

Custom Themes

Define your own theme with a simple CSS class. Remember to prefix the class name with `notAToast`.

1. Define your styles in a CSS class (e.g., .notAToastcustomTheme).

2. Pass the class name to the theme option without the prefix.

Entry & Exit Animations

Make your toasts pop with 33 unique animations for entry and exit.

Entry Animation

Exit Animation

Custom Entry & Exit Animations

Define your own animations with CSS keyframes. Remember to prefix the animation name with notAToast.

1. Define your animation in a CSS @keyframes rule (e.g., @keyframes notAToastfoldIn).

2. Pass the animation name to the options without the prefix (e.g., 'foldIn').

Direct Styling

Override or apply styles directly to any toast for fine-grained control.

Background

Text Color

Border Radius

Font Size

Font Family

Opacity (0-1)

Border

Progress Bar

Visually indicate the remaining duration of the toast.

Show Progress Bar

Progress Bar Color

Progress Bar Height (e.g., '4px')

Progress Bar Position

Progress Bar Animation

Custom Progress Bar Animation

Create unique progress bar effects with custom CSS keyframes. Remember to prefix the animation name with notAToast.

Close Button

Allow users to dismiss toasts manually.

Show Close Button

Button Color

Button Size (e.g., '1rem')

Action Button (Themes)

By default, the action button adopts the toast's theme. You can override this by providing a specific theme name (one of the predefined themes) or a custom CSS class name(same as custom theme).

Main Toast Theme

Action Button Theme

Close toast on action click

Styling Action Button

Style the button independently with specific CSS properties.

There are more action button styling options available. Please check out the docs.

Button Background

Button Text Color

Button Border Radius

Button Border

Close toast on action click

Custom Action Button Theme

Design a completely custom button by defining your own theme class. Remember to prefix the class name with notAToast.

Icons

Add visual cues with built-in icon types, emojis, or your own custom SVGs.

Icon Animation

Icon Timing Function

Icon Background

Icon Color

Icon Border Radius

Custom Icon Animation

Bring icons to life with your own CSS keyframe animations. Remember to prefix the animation name with notAToastIcon.

Updating a Toast

Dynamically update an existing toast after a delay, perfect for async operations.

Note: Set 'duration: 0' for the initial loading toast to prevent it from auto-closing.

Promise (Async) Support

Simulate an API call to see loading, success, and error states.

Note: Set 'duration: 0' for the initial loading toast to prevent it from auto-closing.

Reusable Styles

Define a style object once and reuse it anywhere to maintain consistency.

Custom HTML Toast

For ultimate flexibility, you can provide your own HTML structure for the toast content. When using a custom toast, you still have access to duration, entryAnimation, exitAnimation, pauseOnHover, and position.

Important: To enable closing your custom toast, ensure you include an element with the class `toastCloseButton` within your custom HTML. Clicking this element will dismiss the toast.

Remove All Toasts

Clear all visible toasts from the screen with a single function call.

Support the Project

If you find this library useful, please consider giving it a star on GitHub! Your support helps motivate me to maintain and improve it.

⭐ Star on GitHub