Material Design Snackbar for Mobile and Tablet


Flavio Colonna Romano

Flavio Colonna Romano

Member since 2015


iOS, Android  
5 years ago
4 years ago



View example in my Plunker Desk

Github link

Visit the component page on Github to get the latest version and to submit bugs.


The new type of Android notification in Ionic. This component is new in the material design and it is supposed to be an alternative of the Toasts. Its style is really simple but in the same time complicated if you want to follow the material design guidelines written in Google Material Design, as I did. This component is optimized both for mobile and tablet. You can customize message text, message color, button text, button color, button function and then, thanks to promises, you are able to detect when the Snackbar disappears in order to call your own function.

How to use:

Before use, replace MYPATH with the path you set to this lib (snackbar.html and snackbar-tablet.css):

javascript function init() { if(!initialize) { $http({ method: 'GET', url: 'MYPATH/snackbar.html' }).then(function(result) { var body = document.getElementsByTagName("body")[0]; angular.element(body).append(; snackbarContainer = document.getElementsByClassName('snackbar-wrapper')[0]; initialize = true; }, function(err) { $log.log("Error getting html template", JSON.stringify(err)) initialize = false; }); } }

Then load the javascript file of the snackbar and related stylesheet:



Then add snackbar into your module as a dependency:

javascript var myapp = angular.module('myapp',['snackbar'])

Then add the service $snackbar to the controller on which you want to use the snackbar functions, and once your app is ready, call the init() function

javascript myapp.controller("mycontroller", function($snackbar) { //App ready $snackbar.init(); })

Now let's see how to use properly the snackbar. To call the snackbar simply write this:

```javascript var options = { message: 'Hello World!', time: 'SHORT', buttonName: 'Close', messageColor: 'red', buttonColor: 'white', buttonFunction: helloWorld } ${ console.log("Snackbar disappeared"); // here you can call another function })

/** * Example of function you can call */ function helloWorld() { console.log("Hello world!") } ```

In order to close the snackbar:

javascript $snackbar.hide().

Here there are the options available for the 'show' function:

  • message (compulsory)
  • buttonName (optional)
  • buttonColor (optional but default #a1c2fa)
  • messageColor (optional but default WHITE)
  • time (optional but default SHORT)
  • buttonFunction (optional but default snackbar.hide())

The 'message' parameter inside the options object is compulsory and without it snackbar doesn't work, firing an exception. $snackbar it is also a promise so you can call:

javascript ${message : 'hello'}).then(function(success){},function(error){})

to execute something after the snackbar disappears. Timing in snackbar is expressed by a string that could be ['SHORT','LONG','INDETERMINATE']; SHORT will be 3000 MS, LONG will be 8000 MS and INDETERMINATE will not close automatically the snackbar. When buttonName is not defined you will have a simple snackbar without button. Remember that usually snackbar allows multi-line in mobile but just one line in tablet. Don't put too large text in snackbar due to has not been created for that at the start.


  • 1.2 (adds init() function in order to initialize the snackbar once)
  • 1.1 (latest with snackbar tablet stylesheet injected via javascript)
  • 1.0 (first commit with working snackbar)


Each animation use GPU acceleration to give a smoother movement, essential for hybrid apps like Ionic apps.


  • Roboto font style
  • Ng Animate


The code is licensed under MIT license. Check license.txt for further details.


For any bug or improvement don't hesitate to contact me at my page here

DONE WITH :heart: