Toast Notifications - Live Demo

Interactive demos of hcg-toast, a lightweight zero-dependency JavaScript toast library powered by toast(). Test typed notifications, sticky toasts, custom duration, six screen positions, stack limits, pause on hover, custom instances, and programmatic dismiss - no framework required. Documentation

1. Basic types

Shorthand helpers for success, error, warning, and info toasts.

Trigger toasts

View usage code

toast.success('Changes saved successfully.');
toast.error('Something went wrong.');
toast.warning('Your session expires soon.');
toast.info('New updates are available.');

2. Title and long message

Optional title plus a longer body to test wrapping.

Trigger toast

View usage code

toast.info(
  'Your profile photo was uploaded and is being processed. You will receive a notification when it is ready.',
  {
    title: 'Upload started',
    duration: 6000
  }
);

3. Sticky toast

Set duration: 0 to keep a toast visible until the user closes it.

Trigger toast

View usage code

toast.warning('Please review your settings before continuing.', {
  title: 'Action required',
  duration: 0,
  closable: true
});

4. Custom duration and progress bar

An 8-second toast with a visible progress bar at the bottom.

Trigger toast

View usage code

toast('This toast stays visible for 8 seconds.', {
  duration: 8000,
  showProgress: true
});

5. Position picker

Use toast.configure({ position }) to move the default container.

Choose position

View usage code

toast.configure({ position: 'bottom-right' });
toast.info('Toasts now appear bottom-right.');

6. Max stack

Burst 8 toasts; the library keeps at most 5 visible and dismisses the oldest.

Trigger burst

View usage code

toast.configure({ maxToasts: 5 });

for (let i = 1; i <= 8; i++) {
  toast.info('Toast #' + i);
}

7. Pause on hover

A 3-second toast that pauses its timer while you hover over it (pauseOnHover: true by default).

Trigger toast

View usage code

toast('Hover me to pause the timer.', {
  duration: 3000,
  pauseOnHover: true
});

8. Custom instance

toast.create() returns an independent instance with its own container and defaults - useful for a fixed bottom-center banner area.

Trigger on custom instance

View usage code

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

bottomToast.info('Processing your request…', { duration: 0, closable: true });

9. Programmatic dismiss

Show a sticky toast, then dismiss it by id or clear all with dismissAll().

Controls

Last toast id: —

View usage code

const id = toast.info('Dismiss me programmatically.', {
  duration: 0
});

toast.dismiss(id);
toast.dismissAll();

10. Custom icon

Override the default type icon with icon (text or emoji), iconHtml (SVG markup), or hide it with icon: false.

Trigger toasts

View usage code

toast.success('Backup complete.', { icon: '💾' });

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>'
});

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