Beautiful Google Inspired Snack Bar In JavaScript – Snackbar.js

Category: Javascript , Notification , Recommended | June 25, 2019
Author: egoist
Views Total: 232
Official Page: Go to website
Last Update: June 25, 2019
License: MIT


Beautiful Google Inspired Snack Bar In JavaScript – Snackbar.js


A pretty nice Android inspired snack bar component that shows feedback messages to your users with custom action/callback support.

How to use it:

Install the Snackbar.js package with NPM.

# Yarn
$ yarn add @egoist/snackbar

$ npm install @egoist/snackbar --save

Import the Snackbar.js.

import { createSnackbar } from '@egoist/snackbar'
import '@egoist/snackbar/dist/snackbar.css'

Or directly include the JavaScript and CSS files from a CDN.

<link rel="stylesheet" href=""/>
<script src=""></script>

Display a default snack bar at the bottom of the screen.

snackbar.createSnackbar('Default Notification')

Config the library to automatically dismiss the snack bar after a timeout.

snackbar.createSnackbar('Default Notification',{
  timeout: 3000

Customize the position of the snack bar: “left” | “center” | “right”.

snackbar.createSnackbar('Default Notification',{
  position: 'right'

Execute a callback function when the users click the action button.

snackbar.createSnackbar('Default Notification',{
  actions: [
      text: 'Confirm',
      style: {
        color: 'pink'
      callback(button, snackbar) {
        if (window.confirm('You really wanna dismiss me?')) {

Use the light theme instead.

snackbar.createSnackbar('Default Notification',{
  theme: 'light'

Or apply your own CSS styles:

snackbar.createSnackbar('Default Notification',{
  theme: {
    backgroundColor: '#222',
    actionColor: '#333'


v1.4.0 (06/25/2019)

  • add theme option

v1.3.2 (06/25/2019)

  • Bugfix

v1.3.0 (06/22/2019)

  • stop the snackbar from hiding when hovered

v1.2.2 (06/03/2019)

  • Bug Fixes: pkg: add types field

v1.2.1 (05/28/2019)

  • fix z-index

You Might Be Interested In:

Leave a Reply