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.

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