Notifications inspired by Google Material Design


Lets see what it does...

Here are basic examples of Snackbar in action.

        {pos: 'bottom-left'}); //Set the position

Action Button

                    showAction: false,

Download & Install

Option 1 - Bower install:
                    $ bower install snackbar
Options 2 - NPM Install:
                    $ npm install node-snackbar
Option 3 - Download CSS and Javascript Files:
Download Files

1. Reference the Snackbar javascript and CSS files:

                          <link ref="stylesheet" type="text/css" href="dist/snackbar.min.css" />
                          <script src="dist/snackbar.min.js"></script>

2. Call the show() function on the Snackbar object when you wish to display a notification.

                  $('.button').click(function() {
                 {text: 'Example notification text.'});


Configuration options used to customize each notification.

text null The text to displae inside the notification.
textColor #FFFFFF Text color of the notification text. Default is white.
pos bottom-left The position the notification will show. Refer to the examples above for possible positions.
customClass null Add a custom class to the notification for custom styling.
width auto Width of the notification. Used to shrink/expand window as you wish.
showAction true Boolean to show the action buton or not.
actionText Dismiss Text to display as the action button.
actionTextAria Dismiss, Description for Screen Readers Text for screen readers.
alertScreenReader false Determines if screen readers will annouce the snackbar message.
actionTextColor #4CAF50 Text color of the action button.
backgroundColor #323232 Background color of the notification window.
duration 5000 Time in milliseconds the notification is displayed before fading out.
onActionClick function(ele) Default action closes the notification.
onClose function(ele) Fires when the notification has been closed.