JavaScript Toast Notification Library

Click a button below to trigger sample toasts on this page. For all ten try-it-yourself examples in one place types, sticky toasts, positions, custom icons, and more see the full interactive demo page.

How this library compares with common alternatives.

Install hcg-toast, then call a typed helper from your page script:

toast.success('Changes saved!');
toast.error('Upload failed', { title: 'Error', duration: 6000 });

// const id = toast.info('Processing…', { duration: 0 });
// toast.dismiss(id);
// toast.dismissAll();

• Four types - info, success, warning, error with icons and accent colors.
• Auto-dismiss - default 4 seconds; set duration per toast or instance.
• Sticky toasts - duration: 0 keeps a toast until dismissed.
• Optional title - heading above the message body.
• Six positions - top/bottom combined with left, center, or right.
• Stack limit - maxToasts evicts the oldest when exceeded.
• Pause on hover - timer pauses while the user hovers a toast.
• Custom icons - icon (text/emoji), iconHtml (SVG), or icon: false.
• Progress bar - visual countdown track for timed toasts (showProgress).
• Close button - optional manual dismiss via closable.
• Callbacks - onShow and onDismiss hooks.
• Multiple instances - toast.create() for independent containers.
• CSS variables - theme colors, radius, shadow without editing the library.
• Reduced motion - animations disabled when the user prefers reduced motion.

Shorthand methods set the toast type for you so you do not need to pass type on every call. Each helper uses the matching icon and accent color.

toast.success('Profile updated.');
toast.error('Could not save changes.');
toast.warning('You have unsaved edits.');
toast.info('Sync complete.');

// equivalent to toast(message, { type: 'success' })
toast('Saved!', { type: 'success', title: 'Done' });

Control how long a toast stays visible with duration (milliseconds). Set it to 0 for a sticky toast that remains until dismissed, or use a longer value with showProgress: true to show a countdown bar.

// Sticky until closed or dismissed
toast.warning('Review required before continuing.', {
  title: 'Action required',
  duration: 0,
  closable: true
});

// Longer display with progress bar
toast('Export started. This may take a moment.', {
  duration: 8000,
  showProgress: true
});

Change defaults for the singleton with toast.configure():

toast.configure({
  position: 'bottom-right',
  maxToasts: 3,
  duration: 5000
});

toast.info('Now appears bottom-right.');

Each type has a default icon. Override per toast or set a default on the instance:

// Text or emoji
toast.success('Backup complete.', { icon: '💾' });

// SVG or HTML (trusted markup only)
toast.info('Syncing files…', {
  iconHtml: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10 3a7 7 0 100 14A7 7 0 0010 3z"/></svg>'
});

// Hide icon
toast('Plain message.', { icon: false });

// Default on instance
const stars = toast.create({ icon: '⭐' });
stars.info('You have a new message.');

Use toast.create() when you need a separate container with its own position, defaults, and stack - for example a bottom-center status area alongside the default top-right notifications.

const bottomToast = toast.create({
  position: 'bottom-center',
  maxToasts: 2,
  duration: 0
});

bottomToast.info('Syncing…', { closable: true });
bottomToast.success('All done!');
// bottomToast.dismissAll();
// bottomToast.destroy();

Every instance - including the default singleton - exposes the same methods for showing, dismissing, and reconfiguring toasts. All typed helpers return a numeric id you can pass to dismiss().

All default styles live in hcg-toast.css, using plain single-class selectors and CSS custom properties on .hcg-toast-container. Override from your own stylesheet loaded after it:

• .hcg-toast-container - fixed stack host (position modifiers: --top-right, etc.)
• .hcg-toast-item - individual toast (type modifiers: --success, --error, etc.)
• .hcg-toast-icon, .hcg-toast-body, .hcg-toast-title, .hcg-toast-message
• .hcg-toast-close - dismiss button
• .hcg-toast-progress-track / .hcg-toast-progress - countdown track and shrinking bar

.hcg-toast-container {
  --hcg-toast-radius: 8px;
  --hcg-toast-success-accent: #10b981;
  --hcg-toast-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

Run several toast containers on one page at the same time for example errors top-right and status messages bottom-center. Each instance is fully independent; they share only the stylesheet.

const alerts = toast.create({ position: 'top-right', maxToasts: 5 });
const status = toast.create({ position: 'bottom-center', maxToasts: 2 });

alerts.error('Validation failed.');
status.info('Saving draft…', { duration: 0 });

// status.destroy();

• Error toasts use role="alert" and aria-live="assertive".
• Other types use role="status" with aria-live="off" to override the implicit polite live region and keep rapid bursts responsive.
• The container uses aria-live="off".
• Close buttons include aria-label="Dismiss notification".
• Icons are marked aria-hidden="true"; message text is exposed to assistive tech.
• Enter/exit and progress animations are disabled when prefers-reduced-motion: reduce is set; the progress track remains visible.

Works in all modern browsers that support CSS transitions and requestAnimationFrame, including the latest versions of Chrome, Firefox, Safari, and Edge. No polyfills are required.

Released under the MIT License. Free for personal and commercial use. Copyright HTML Code Generator.

hcg-toast is one of several vanilla JavaScript components published by HTML Code Generator. These libraries work well alongside toast notifications:

• JavaScript modal popup library - blocking dialogs when user confirmation is required.
• JavaScript context menu - right-click menus for actions that may trigger toast feedback.
• Searchable select dropdown - filterable selects for forms that pair with save confirmations.
• JavaScript virtual scrolling - performant long lists in dashboards that also show status toasts.
• JavaScript format tool - tidy code snippets before pasting hcg-toast examples into your project.