Beautiful Toast Messages For Vanilla JavaScript

Preview:

Description:

A minimal, beautiful, plug & play toast message library created using pure (vanilla) JavaScript.

See Also:

• 10 Best Toast Notification JavaScript Libraries

How to use it:

1. Load the vanilla-toast.min.js script in the document and we’re ready to go.

<script src="lib/vanilla-toast.min.js"></script>

2. Create toast messages as follows.

vt.success("Success Message");
vt.info("Info Message");
vt.warn("Warning Message");
vt.error("Error Message");

3. Available options to customize your toast messages.

• title: Toast Title
• position: TopCenter, TopLeft, TopRight, BottomCenter, BottomLeft, BottomRight
• duration: Auto dismiss the toast after 2 seconds
• closable: Determine whether the toast message is dismissable
• focusable: Determine whether the toast message is focusable
• callback: Trigger a function when the toast message is dismissed

vt.success("Success Message",{
  title: undefined,
  position: toastPosition.TopCenter,
  duration: 2000,
  closable: true,
  focusable: true,
  callback: undefined
});