Notification

Pages

Users

Robert De Niro

robertdeniro@left4code.com

Denzel Washington

denzelwashington@left4code.com

Leonardo DiCaprio

leonardodicaprio@left4code.com

Al Pacino

alpacino@left4code.com

Products

Oppo Find X2 Pro

Smartphone & Tablet

Sony Master Series A9G

Electronic

Sony A7 III

Photography

Sony Master Series A9G

Electronic

Basic Notification

Show example code

                                          <!-- BEGIN: Notification Content -->
 <div id="basic-non-sticky-notification-content" class="toastify-content hidden flex">
     <div class="font-medium">Yay! Updates Published!</div> <a class="font-medium text-theme-1 dark:text-gray-500 mt-1 sm:mt-0 sm:ml-40" href="">Review Changes</a>
 </div> <!-- END: Notification Content -->
 <!-- BEGIN: Notification Toggle --> <button id="basic-non-sticky-notification-toggle" class="btn btn-primary mr-1">Show Non Sticky Notification</button> <button id="basic-sticky-notification-toggle" class="btn btn-primary mt-2 sm:mt-0">Show Sticky Notification</button> <!-- END: Notification Toggle --> 
                                    

                                          // Basic non sticky notification cash("#basic-non-sticky-notification-toggle").on("click", function () { Toastify({ node: cash("#basic-non-sticky-notification-content") .clone() .removeClass("hidden")[0], duration: 3000, newWindow: true, close: true, gravity: "top", position: "right", backgroundColor: "white", stopOnFocus: true, }).showToast(); }); // Basic sticky notification cash("#basic-sticky-notification-toggle").on("click", function () { Toastify({ node: cash("#basic-non-sticky-notification-content") .clone() .removeClass("hidden")[0], duration: -1, newWindow: true, close: true, gravity: "top", position: "right", backgroundColor: "white", stopOnFocus: true, }).showToast(); });  
                                    

Success Notification

Show example code

                                          <!-- BEGIN: Notification Content -->
 <div id="success-notification-content" class="toastify-content hidden flex"> <i class="text-theme-9" data-feather="check-circle"></i>
     <div class="ml-4 mr-4">
         <div class="font-medium">Message Saved!</div>
         <div class="text-gray-600 mt-1">The message will be sent in 5 minutes.</div>
     </div>
 </div> <!-- END: Notification Content -->
 <!-- BEGIN: Notification Toggle --> <button id="success-notification-toggle" class="btn btn-primary">Show Notification</button> <!-- END: Notification Toggle --> 
                                    

                                          // Success notification cash("#success-notification-toggle").on("click", function () { Toastify({ node: cash("#success-notification-content") .clone() .removeClass("hidden")[0], duration: -1, newWindow: true, close: true, gravity: "top", position: "right", stopOnFocus: true, }).showToast(); });  
                                    

Notification With Actions

Show example code

                                          <!-- BEGIN: Notification Content -->
 <div id="notification-with-actions-content" class="toastify-content hidden flex"> <i data-feather="hard-drive"></i>
     <div class="ml-4 mr-4">
         <div class="font-medium">Storage Removed!</div>
         <div class="text-gray-600 mt-1">The server will restart in 30 seconds, don't make<br> changes during the update process!</div>
         <div class="font-medium flex mt-1.5"> <a class="text-theme-1 dark:text-gray-500" href="">Restart Now</a> <a class="text-gray-600 ml-3" href="">Cancel</a> </div>
     </div>
 </div> <!-- END: Notification Content -->
 <!-- BEGIN: Notification Toggle --> <button id="notification-with-actions-toggle" class="btn btn-primary">Show Notification</button> <!-- END: Notification Toggle --> 
                                    

                                          // Notification with actions cash("#notification-with-actions-toggle").on("click", function () { Toastify({ node: cash("#notification-with-actions-content") .clone() .removeClass("hidden")[0], duration: -1, newWindow: true, close: true, gravity: "top", position: "right", stopOnFocus: true, }).showToast(); });  
                                    

Notification With Avatar

Show example code

                                          <!-- BEGIN: Notification Content -->
 <div id="notification-with-avatar-content" class="toastify-content hidden flex">
     <div class="w-10 h-10 flex-none image-fit rounded-full overflow-hidden"> <img alt="Midone Tailwind HTML Admin Template" src="dist/images/profile-13.jpg"> </div>
     <div class="ml-4 sm:mr-28">
         <div class="font-medium">Robert De Niro</div>
         <div class="text-gray-600 mt-1">See you later! 😃😃😃</div>
     </div> <a data-dismiss="notification" class="absolute top-0 bottom-0 right-0 flex items-center px-6 border-l border-gray-200 dark:border-dark-5 font-medium text-theme-1 dark:text-gray-500" href="javascript:;">Reply</a>
 </div> <!-- END: Notification Content -->
 <!-- BEGIN: Notification Toggle --> <button id="notification-with-avatar-toggle" class="btn btn-primary">Show Notification</button> <!-- END: Notification Toggle --> 
                                    

                                          // Notification with avatar cash("#notification-with-avatar-toggle").on("click", function () { // Init toastify let avatarNotification = Toastify({ node: cash("#notification-with-avatar-content") .clone() .removeClass("hidden")[0], duration: -1, newWindow: true, close: false, gravity: "top", position: "right", stopOnFocus: true, }).showToast(); // Close notification event cash(avatarNotification.toastElement) .find('[data-dismiss="notification"]') .on("click", function () { avatarNotification.hideToast(); }); });  
                                    

Notification With Split Buttons

Show example code

                                          <!-- BEGIN: Notification Content -->
 <div id="notification-with-split-buttons-content" class="toastify-content hidden flex">
     <div class="sm:mr-40">
         <div class="font-medium">Introducing new theme</div>
         <div class="text-gray-600 mt-1">Release version 2.3.3</div>
     </div>
     <div class="absolute top-0 bottom-0 right-0 flex flex-col border-l border-gray-200 dark:border-dark-5"> <a class="flex-1 flex items-center justify-center px-6 font-medium text-theme-1 dark:text-gray-500 border-b border-gray-200 dark:border-dark-5" href="javascript:;">View Details</a> <a data-dismiss="notification" class="flex-1 flex items-center justify-center px-6 font-medium text-gray-600" href="javascript:;">Dismiss</a> </div>
 </div> <!-- END: Notification Content -->
 <!-- BEGIN: Notification Toggle --> <button id="notification-with-split-buttons-toggle" class="btn btn-primary">Show Notification</button> <!-- END: Notification Toggle --> 
                                    

                                          // Notification with split buttons cash("#notification-with-split-buttons-toggle").on("click", function () { // Init toastify let splitButtonsNotification = Toastify({ node: cash("#notification-with-split-buttons-content") .clone() .removeClass("hidden")[0], duration: -1, newWindow: true, close: false, gravity: "top", position: "right", stopOnFocus: true, }).showToast(); // Close notification event cash(splitButtonsNotification.toastElement) .find('[data-dismiss="notification"]') .on("click", function () { splitButtonsNotification.hideToast(); }); });  
                                    

Notification With Buttons Below

Show example code

                                          <!-- BEGIN: Notification Content -->
 <div id="notification-with-buttons-below-content" class="toastify-content hidden flex"> <i data-feather="file-text"></i>
     <div class="ml-4 mr-5 sm:mr-20">
         <div class="font-medium">Robert De Niro</div>
         <div class="text-gray-600 mt-1">Sent you new documents.</div>
         <div class="mt-2.5"> <a class="btn btn-primary py-1 px-2 mr-2" href="">Preview</a> <a class="btn btn-outline-secondary py-1 px-2" href="">Download</a> </div>
     </div>
 </div> <!-- END: Notification Content -->
 <!-- BEGIN: Notification Toggle --> <button id="notification-with-buttons-below-toggle" class="btn btn-primary">Show Notification</button> <!-- END: Notification Toggle --> 
                                    

                                          // Notification with buttons below cash("#notification-with-buttons-below-toggle").on("click", function () { // Init toastify Toastify({ node: cash("#notification-with-buttons-below-content") .clone() .removeClass("hidden")[0], duration: -1, newWindow: true, close: true, gravity: "top", position: "right", stopOnFocus: true, }).showToast(); });  
                                    

Dark Mode