Top 18 JavaScript Notifications
Collection of free vanilla JavaScript notification and alert code examples: boxes, badges, etc.
Collection
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.
