DEV Community

Cover image for Custom Notification Template with JS
Shubham Tiwari
Shubham Tiwari

Posted on

Custom Notification Template with JS

Hello everyone today I will be discussing how to create a custom notification mini-library with HTML, SASS and Javascript. Although its a very basic notification Example but you will get the overview of how you can manage and create your own complex notifications designs.

Let's get started...

Features of This notification -

  • Responsiveness
  • Has an animation on closing notification
  • Easily Customizable heading, message and styling with the CSS class of yours
  • Browser Support ( Not completely sure about this one but I didn't use any feature or property which will break the notification in other browsers).


<!-- Notification Container - All the nofications will go here-->
<div class="notification__container"></div>
<!-- Notification Container -->

<!-- Normal Components for the page -->
<button class="submit success">Toggle Success</button>
<button class="submit error">Toggle Error</button>
<button class="submit warning">Toggle Warning</button>
<button class="submit custom">Custom Notification</button>
Enter fullscreen mode Exit fullscreen mode
  • All you need is create a div with class "notification__container", it is the container which will hold all the notifications.
  • 4 buttons to show the notifications of different types - 3 default stylings (success,error and warning) and 1 custom which will take the styling from the custom CSS class.


// Notification styles Start here
.notification {
  max-width: 400px;
  border-radius: 5px;
  display: flex;
  align-items: start;
  gap: 2rem;
  padding: 1rem 2rem;
  transition: all 0.5s linear;

  // Styling for the main container, as i am following BEM,
  // it is nested inside the notification class
  &__container {
    position: fixed;
    height: 80vh;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 1rem;
    overflow: auto;


  // Delete button Styling
  .delete {
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 1.3rem;
    color: white;

  // Main Message styling 
  &__description {
    margin-top: 1rem;

  //   Modifiers for success,error and warning notification
  // These are default stylings for the notifications
  &--success {
    background-color: #17B169;
    color: white;

  &--error {
    background-color: crimson;
    color: white;

  &--warning {
    background-color: #FFC72C;
    color: white;

  @media screen and (max-width: 500px) { 
    padding:0.5rem 0.75rem;


.slideOut {
 transform:scale(0) rotate(720deg);
// Notification Styles end here
Enter fullscreen mode Exit fullscreen mode
  • Max width of the notification will be 400px and for mobile devices, it will be 200px.
  • Notification container will be fixed on screen even on scroll.
  • Description or Message section has word-wrap:break-word, it will wrap the word to a new line if it is bigger than the notification.
  • 3 modifier Classes(--success,--error,--warning).
  • slideOut is the animation class for the delete button.

Javascript -

const miniNotification = ({ type, heading, message }) => {
  const notificationContainer = document.querySelector(

Enter fullscreen mode Exit fullscreen mode
  • There is a main function called "miniNotification" with 3 params namely type - Type of notification ( it will take the name of css class which will style the notification), heading - Title of the notification, message - message of the notification.
  • Accessing the notification container using querySelector.
const notificationTemplate = () => {
    const notificationTypes = ["success", "error", "warning"];

    const newNotification = document.createElement("div");

    if (notificationTypes.includes(type)) {
        `notification notification--${type}`
    } else {
      newNotification.setAttribute("class", `notification ${type}`);

    // Notification Template
    newNotification.innerHTML = `
    <div class="notification__text">
      <h2 class="notification__heading">
      <p class="notification__description">
    <button class="delete">x</button>

    // Adding the notification to the container

Enter fullscreen mode Exit fullscreen mode
  • Creating an array which will have default notification types (success,error and warning)
  • Checking if the type passed is matching any value in the array, if it is true then set the default styling of the matching value with prefix of "notification--", else set the custom class for the notification without any prefix.
  • Then creating the html template with string interpolation (backtiks) and passing the heading and message their.
  • At the end of this function, appending the new notification to the container.
// Deleting the Notification
  notificationContainer.addEventListener("click", (e) => {
    const target =;

    if (target.matches(".delete")) {
      const notification = target.closest(".notification");

      setTimeout(() => {
        if (notificationContainer.contains(notification)) {
      }, 500);
Enter fullscreen mode Exit fullscreen mode
  • Event handled for the delete button, it will check whether the clicked button has a "delete" class name, if it matches then select the closest container with the "notification" class.(Which will be the notification inside which the button is present).
  • Then add the "slideOut" class to the notification and using setTimeout, remove the notification from the DOM using removeChild() method after 500ms or .5s.

CODEPEN - Entire code with documentation is here

You can contact me on -
Instagram -
LinkedIn -
Email -

^^You can help me with some donation at the link below Thank you👇👇 ^^
☕ --> <--

Also check these posts as well

Top comments (0)