Material Style Toasts In JavaScript – Buzz Notify

Buzz Notify is a tiny JavaScript notification library to create Material Design inspired toasts of various types (‘success’, ‘danger’, ‘warning’) with a single JS call.

How to use it:

1. Download the library and insert the main script index.js into the document.

<!-- From Local -->
<script src="index.js"></script>
<!-- Or From A CDN -->
<script src="https://cdn.jsdelivr.net/npm/@reliutg/buzz-notify/index.min.js"></script>

2. Create a placeholder for the toast message.

<div id="notify"></div>

3. Display a basic toast message on the screen.

Notify({
  title: 'Toast Message'
});

4. Add more content (HTML) to the toast notification.

Notify({
  title: 'Toast Message',
  html: '<b>More Content</b>'
});

5. Change the default notification type.

Notify({
  title: 'Toast Message',
  type: 'danger'
});
Notify({
  title: 'Toast Message',
  type: 'warning'
});

6. Determine the timeout in milliseconds. Default: 2000ms. If the duration is a negative number, the notification will not be removed.

Notify({
  title: 'Toast Message',
  duration: 5000
});

7. Change the position of the toast message. Can be ‘top left’, ‘top right’, ‘top center’, ‘center start’, ‘center’, ‘center end’, ‘bottom left’, ‘bottom center’, or ‘bottom right’.

Notify({
  title: 'Toast Message',
  position: 'top center'
});

8. Execute a callback function when the toast message is dismissed.

Notify({
  title: 'Toast Message',
  type: 'warning'
}, function(){
  // do something
});

Changelog:

10/04/2021

• v1.5.1: Bugfix