Collection of free vanilla JavaScript notification and alert code examples: boxes, badges, etc. Update of January 2020 collection. 6 new items.
Related Articles
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Message Icons GSAP
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Animated Dismissible Banners
Animated dismissible alert banners.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Alert StreamLabs
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: anime.js
Links
Made with
- HTML / CSS (SCSS) / JS (TypeScript)
About a code
Bell Ring - Notifications
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
IPhone Notification Microinteraction
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Notification Badge
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Notification Bell
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
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Notification Cards Animation
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
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS (Babel)
About a code
Funky Notification
Notification with light mode and dark mode.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / JS
About a code
Notification
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: lottie.js
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Android Music Notification
The Android notification for music. Long press (hold mouse) to trigger animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS / JS
About a code
Notification Bell
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS / JS
About a code
Notification
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Stripe Notification Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
About a code
Notyf
A dead simple, responsive, a11y compatible, vanilla JavaScript toasts plugin. Easy integration with React, Angular and Vue.
Links
About a code
Notie
A clean and simple notification, input, and selection suite for JavaScript, with no dependencies.
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Vanilla JS Responsive Message Box with Javascript Class
This message box implementation in JavaScript, inspired by material design's toast message.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Notification Bell
Animated notification bell in JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
About a code
Noty
Dependency-free notification library that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.