Snackbar is a colorful stripe with text that hangs on top of the page. Snackbar hangs for 5 seconds, but this timeout could be changed. Snackbar will not disappear if mouse is over it.


How to use?

Snackbar is a service. As a service it could be used, for example in Controller. suSnackbar have some public methods to interact with this type of elements:

.push(text, [config], [callback])

Method for display snackbar. The first argument must contain text to display. Second optional argument is a configuration object desribed bellow. Third parameter is a callback function, that have to be called when snackbar will disappear.

colorSnackbars are in Interaction Elements group, so they can apply corresponding colors
timeoutTime in milliseconds after which snackbar will disappear
bottomBoolean value, and if is true, snackbar will appear on the bottom part of screen

Usage example:

yourApp.controller('YourController', function($scope, suSnackbar) {
    $scope.$on('someEvent', function() {
        suSnackbar.push('Positive snackbar sample', {
            color: "positive",
            timeout: 10000
        }, function() {
            console.log('Do this when snackbar disappears');


This method is intended to remove all displayed snackbars.