alert-notify

Live demo

Fire toasts from the browser. Same API every framework gets.

Complete API reference

Nothing is required beyond importing the package and CSS. The portal auto-mounts. Below is every method, option, and default.

Required setup

import { toast } from "alert-notify";
import "alert-notify/style.css";

// That's it. No provider. No root container.
toast.success("Hello");

Methods

Per-toast options

Passed as the second argument to any toast.* method.

Global config (toast.config)

Sets defaults for all toasts. Optional wrappers pass the same props.

Promise API

toast.promise(uploadFile(), {
  loading: "Uploading…",
  success: (file) => `Uploaded ${file.name}`,
  error: (err) => (err instanceof Error ? err.message : "Failed"),
});

// Or pass full option objects:
toast.promise(save(), {
  loading: { title: "Saving…", description: "Please wait" },
  success: { title: "Saved", duration: 3000 },
  error: { title: "Failed", important: true },
});

Multiple toasters & headless

import { createToaster } from "alert-notify";

// Isolated instance (own portal + config)
const modalToast = createToaster({ position: "bottom-center" });
modalToast.success("Saved in modal");

// Headless — you render the UI
const headless = createToaster({}, { headless: true });
headless.subscribe((toasts) => {
  // render custom UI from toasts[]
});

Optional framework wrappers

Not required. They only sync config from props. Accept the same keys as toast.config.

Behavior notes

• Title/description are HTML-escaped by default. Use html only when you intend markup.
• loading toasts default to duration: Infinity until updated (e.g. via promise).
• Same id coalesces — updates the existing toast instead of stacking a duplicate.
• Escape dismisses the focused toast. Swipe/drag dismisses when dismissible is true.
• SSR-safe: no DOM work until document exists.
• CSS import is recommended but optional if you ship your own styles using the same class names / variables.

React toast, notifications, alerts & snackbars

One API for the jobs people usually split across react toast, react notification, react-alert, and snackbar packages. Works the same in Vue, Svelte, Angular, Astro, and CDN HTML.

• React toast notifications — toast.success, toast.error, promise toasts, Undo actions.
• React alerts — drop-in feel for react-alert style success / error / info messages.
• Snackbars — positioned stacks, dismiss, pause on hover, progress bar.
• Toastify-style flows — typed helpers plus toast.promise without the toastify bundle weight.
• Cross-framework apps — same package in a React app, Vue island, or plain script tag.

How to use

Import styles once. Call toast.* from anywhere. Optional <Toaster /> wrappers only sync config props — the portal auto-mounts.

import { toast } from "alert-notify";
import "alert-notify/style.css";

toast.success("Saved");
toast.error("Failed", { description: "Try again" });
// No container. Portal mounts itself.

// App.tsx
import { toast } from "alert-notify";
import { Toaster } from "alert-notify/react";
import "alert-notify/style.css";

export function App() {
  return (
    <>
      <Toaster position="top-right" richColors />
      <button onClick={() => toast.success("Saved")}>Save</button>
    </>
  );
}

<!-- App.vue -->
<script setup>
import { toast } from "alert-notify";
import { Toaster } from "alert-notify/vue";
import "alert-notify/style.css";
</script>

<template>
  <Toaster position="top-right" rich-colors />
  <button @click="toast.success('Saved')">Save</button>
</template>

<!-- +layout.svelte / App.svelte -->
<script>
  import { toast } from "alert-notify";
  import Toaster from "alert-notify/svelte";
  import "alert-notify/style.css";
</script>

<Toaster position="top-right" richColors />
<button on:click={() => toast.success("Saved")}>Save</button>

// any.component.ts
import { toast } from "alert-notify";
import "alert-notify/style.css";

show() {
  toast.success("Saved");
}

// Optional: call toast.config({...}) once in AppComponent.ngOnInit
// No Angular module or container component required.

---
// client script or framework island
---
<script>
  import { toast } from "alert-notify";
  import "alert-notify/style.css";
  document.querySelector("button")?.addEventListener("click", () => {
    toast.success("Saved");
  });
</script>

<link rel="stylesheet" href="https://unpkg.com/alert-notify@2/dist/style.css" />
<script src="https://unpkg.com/alert-notify@2/dist/alert-notify.global.js"></script>
<script>
  AlertNotify.toast.success("Hello from CDN");
</script>

Dark mode & CSS variables

Set theme to light, dark, or system. System mode follows the OS, plus html.dark / data-theme="dark". Rebrand colors by overriding CSS variables in your own stylesheet.

// Dark mode
toast.config({ theme: "system" }); // OS + html.dark / data-theme
toast.config({ theme: "dark" });
toast.config({ theme: "light" });
toast.config({ richColors: true }); // soft tinted fills

/* your-app.css — after alert-notify/style.css */
.an-toaster {
  --an-bg: #ffffff;
  --an-fg: #0f172a;
  --an-muted: #64748b;
  --an-border: rgba(15, 23, 42, 0.1);

  --an-success: #16a34a;
  --an-error: #e11d48;
  --an-warning: #ca8a04;
  --an-info: #2563eb;

  /* Soft rich fills */
  --an-success-bg: #ecfdf5;
  --an-success-border: #a7f3d0;
  --an-error-bg: #fff1f2;
  --an-error-border: #fecdd3;
  --an-warning-bg: #fffbeb;
  --an-warning-border: #fde68a;
  --an-info-bg: #eff6ff;
  --an-info-border: #bfdbfe;
}

.an-toaster[data-theme="dark"] {
  --an-bg: #1e293b;
  --an-fg: #f8fafc;
  --an-success: #4ade80;
  --an-error: #fb7185;
  --an-warning: #facc15;
  --an-info: #60a5fa;
  --an-success-bg: #14532d;
  --an-error-bg: #4c0519;
  --an-warning-bg: #422006;
  --an-info-bg: #1e3a8a;
}

Alternative to toastify, Sonner, hot-toast & react-alert

If you landed here searching for react toast, toastify, tostify, react-toastify, react-hot-toast, Sonner, react-alert, notistack, or a React notification / snackbar library — alert-notify is built for that search, with a smaller footprint and no React-only lock-in.

FAQ

Common questions about React toasts, toastify alternatives, and framework-agnostic notifications.