Smooth Snackbar & Toast Notification In JavaScript – js-snackbar

js-snackbar is a pure JavaScript plugin that helps you create Material Design inspired non-blocking snackbars & toast notifications on the web app.

With smooth CSS animations and optional duration, status, message and much more.

For compact toast messages that work well in modern interface layouts, review this modern JavaScript toast popup.

See also:

• 10 Best Toast Notification JavaScript Libraries

How to use it:

1. Import the stylesheet js-snackbar.css and JavaScript js-snackbar.js into the document.

<link rel="stylesheet" href="css/js-snackbar.css">
<script src="js/js-snackbar.js"></script>

2. Create a basic snackbar/toast notification on the screen. HTML content is supproted.

new Snackbar({
    message: "Message Here"
});

3. Decide whether to display a close icon in the notification.

new Snackbar({
    message: "Message Here",
    dismissible: true
});

4. Specify the timeout in milliseconds. Default: 5000ms.

new Snackbar({
    message: "Message Here",
    timeout: 3000
});

5. Change the notification type. All possible types:

• success (default)
• green
• warning
• alert
• orange
• danger
• error
• red

new Snackbar({
    message: "Message Here",
    status: "success"
});

6. Add custom actions:

new Snackbar({
    message: "Message Here",
    status: "success",
    actions: [{
      text: "Click Me!",
      function: function(){
        alert("A-C-T-I-O-N");
      }
    }]
});

7. Make the notification Sticky.

new Snackbar({
    message: "Message Here",
    status: "success",
    fixed: true
});

8. Determine the position of the toast notification. Default: br (bottom right).

new Snackbar({
    message: "Message Here",
    status: "success",
    position: "bl" // "br", "tr", "tc", "tm", "bc", "bm", "tl", or "bl"
});

9. Set the width of the snackbar.

new Snackbar({
    message: "Message Here",
    width: "80%"
});

10. Add a custom icon to the status label: “exclamation”, “danger”, “warn”, “question”, “question-mark”, “info”, “add”, “plus”, or any single character.

new Snackbar({
    message: "Message Here",
    icon: "danger"
});

11. Customize the animation speed.

new Snackbar({
    message: "Message Here",
    speed: 5000
});

Changelog:

v1.6.0 (04/07/2023)

• Improvements to icons

v1.5.1 (09/03/2022)

• Updated dependencies.

v1.5 (02/16/2021)

• SnackBars now have the ability to specify an “icon” to appear within the status label.

v1.4 (02/11/2021)

• The position property should now allow options for central positioning
• A new speed option allowing the user to define the transition-duration for the SnackBar

v1.3 (02/03/2021)

• Add ability to set width
• Allow timeout to be set to 0
• Fix bug where setting status to null would crash

02/03/2021

• Includes ability to define message as HTML

01/14/2021

• Allow snackbars to be in new positions

04/02/2019

• Create “fixed” option

02/18/2019

• Simply the search children function