Collection
Post cover

Top 18 JavaScript Notifications

Collection of free vanilla JavaScript notification and alert code examples: boxes, badges, etc.

Message Icons GSAP

Author: Shahid Shaikh

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: gsap.js

Animated Dismissible Banners

Author: Ben Brookes

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

Animated dismissible alert banners.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Alert StreamLabs

Author: Renilson [MALCOON] Medeiros

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: anime.js

Bell Ring - Notifications

Author: Braydon Coyer

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (TypeScript)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

IPhone Notification Microinteraction

Author: Sarah Drasner

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: gsap.js

Notification Badge

Author: Yuriy

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Notification Bell

Author: Gabriele Corti

Links: demo and code

Made with: HTML / CSS / JS

Design a notification component where an SVG icon is animated while a message is introduced from the side.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Notification Cards Animation

Author: VERDIEU Steeve

Links: demo and code

Made with: HTML / CSS / JS

An experiment of animation with CSS and JavaScript which puts in scene notification cards that animate when a card is deleted or archived.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Funky Notification

Author: Ryan

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS (Babel)

Notification with light mode and dark mode.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Notification

Author: Mihai Veronica

Links: demo and code

Made with: HTML / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: lottie.js

Android Music Notification

Author: Cory L

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

The Android notification for music. Long press (hold mouse) to trigger animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Notification Bell

Author: Jonatan Sosa

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Notification

Author: satyam

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Stripe Notification Animation

Author: ninja

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Notyf

Author: Carlos Roso

Links: github page, demo page

A minimalistic, responsive, vanilla JavaScript library to show toast notifications.

Notyf is a minimalistic JavaScript library for toast notifications. It's responsive, A11Y compatible, dependency-free and tiny (~3KB). Easy integration with React, Angular, Aurelia, Vue, and Svelte.

Features

  • Responsive
  • A11Y compatible
  • Strongly typed codebase (TypeScript Typings readily available)
  • 4 types of bundles exposed: ES6, CommonJS, UMD, and IIFE (for vanilla, framework-free usage).
  • End-to-end testing with Cypress
  • Easily plugable to modern frameworks. Recipes available to integrate with React, Angular, Aurelia, Vue, and Svelte.
  • Optional ripple-like fancy revealing effect
  • Simple but highly extensible API. Create your own toast types and customize them.
  • Support to render custom HTML content within the toasts
  • Tiny footprint (<3K gzipped)
  • Works on IE11

Notie

Author: Jared Reich

Links: github page

a clean and simple notification, input, and selection suite for javascript, with no dependencies

With notie you can:

  • Alert users
  • Confirm user choices
  • Allow users to input information
  • Allow users to select choices
  • Allow users to select dates

Features

  • Pure JavaScript, no dependencies, written in ES6
  • Easily customizable
  • Change colors to match your style/brand
  • Modify styling with the sass file (notie.scss) or overwrite the CSS
  • Font size auto-adjusts based on screen size

Vanilla JS Responsive Message Box with Javascript Class

Author: Takane Ichinose

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

This message box implementation in JavaScript, inspired by material design's toast message.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Notification Bell

Author: Ryan Morr

Links: demo and code

Made with: HTML / CSS / JS

Animated notification bell in JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Noty

Author: Nedim Arabac

Links: github page, home page

NOTY is a notification library that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.

The notifications can be positioned at the; top - topLeft - topCenter - topRight - center - centerLeft - centerRight - bottom - bottomLeft - bottomCenter - bottomRight

There are lots of other options in the API to customise the text, animation, buttons and much more.

It also has various callbacks for the buttons, opening closing the notifications and queue control.

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback