Notification

Basic Notification

Show example code

  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="basic-non-sticky-notification-content" class="toastify-content hidden flex"HTMLCloseTag HTMLOpenTagdiv class="font-medium"HTMLCloseTagYay! Updates Published!HTMLOpenTag/divHTMLCloseTag HTMLOpenTaga class="font-medium text-primary dark:text-slate-400 mt-1 sm:mt-0 sm:ml-40" href=""HTMLCloseTagReview ChangesHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Notification Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag HTMLOpenTagbutton id="basic-non-sticky-notification-toggle" class="btn btn-primary mr-1"HTMLCloseTagShow Non Sticky NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton id="basic-sticky-notification-toggle" class="btn btn-primary mt-2 sm:mt-0"HTMLCloseTagShow Sticky NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag

  // Basic non sticky notification $("#basic-non-sticky-notification-toggle").on("click", function () { Toastify({ node: $("#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 $("#basic-sticky-notification-toggle").on("click", function () { Toastify({ node: $("#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

  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="success-notification-content" class="toastify-content hidden flex"HTMLCloseTag HTMLOpenTagi class="text-success" data-lucide="check-circle"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="ml-4 mr-4"HTMLCloseTag HTMLOpenTagdiv class="font-medium"HTMLCloseTagMessage Saved!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-slate-500 mt-1"HTMLCloseTagThe message will be sent in 5 minutes.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Notification Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag HTMLOpenTagbutton id="success-notification-toggle" class="btn btn-primary"HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag

  // Success notification $("#success-notification-toggle").on("click", function () { Toastify({ node: $("#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

  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="notification-with-actions-content" class="toastify-content hidden flex"HTMLCloseTag HTMLOpenTagi data-lucide="hard-drive"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="ml-4 mr-4"HTMLCloseTag HTMLOpenTagdiv class="font-medium"HTMLCloseTagStorage Removed!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-slate-500 mt-1"HTMLCloseTagThe server will restart in 30 seconds, don't makeHTMLOpenTagbrHTMLCloseTag changes during the update process!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="font-medium flex mt-1.5"HTMLCloseTag HTMLOpenTaga class="text-primary dark:text-slate-400" href=""HTMLCloseTagRestart NowHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga class="text-slate-500 ml-3" href=""HTMLCloseTagCancelHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Notification Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag HTMLOpenTagbutton id="notification-with-actions-toggle" class="btn btn-primary"HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag

  // Notification with actions $("#notification-with-actions-toggle").on("click", function () { Toastify({ node: $("#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

  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="notification-with-avatar-content" class="toastify-content hidden flex"HTMLCloseTag HTMLOpenTagdiv class="w-10 h-10 flex-none image-fit rounded-full overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Rocketman - HTML Admin Template" src="dist/images/profile-10.jpg"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="ml-4 sm:mr-28"HTMLCloseTag HTMLOpenTagdiv class="font-medium"HTMLCloseTagRobert De NiroHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-slate-500 mt-1"HTMLCloseTagSee you later! 😃😃😃HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTaga data-dismiss="notification" class="absolute top-0 bottom-0 right-0 flex items-center px-6 border-l border-slate-200/60 dark:border-darkmode-400 font-medium text-primary dark:text-slate-400" href="javascript:;"HTMLCloseTagReplyHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Notification Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag HTMLOpenTagbutton id="notification-with-avatar-toggle" class="btn btn-primary"HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag

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

Notification With Split Buttons

Show example code

  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="notification-with-split-buttons-content" class="toastify-content hidden flex"HTMLCloseTag HTMLOpenTagdiv class="sm:mr-40"HTMLCloseTag HTMLOpenTagdiv class="font-medium"HTMLCloseTagIntroducing new themeHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-slate-500 mt-1"HTMLCloseTagRelease version 2.3.3HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="absolute top-0 bottom-0 right-0 flex flex-col border-l border-slate-200/60 dark:border-darkmode-400"HTMLCloseTag HTMLOpenTaga class="flex-1 flex items-center justify-center px-6 font-medium text-primary dark:text-slate-400 border-b border-slate-200/60 dark:border-darkmode-400" href="javascript:;"HTMLCloseTagView DetailsHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga data-dismiss="notification" class="flex-1 flex items-center justify-center px-6 font-medium text-slate-500" href="javascript:;"HTMLCloseTagDismissHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Notification Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag HTMLOpenTagbutton id="notification-with-split-buttons-toggle" class="btn btn-primary"HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag

  // Notification with split buttons $("#notification-with-split-buttons-toggle").on("click", function () { // Init toastify let splitButtonsNotification = Toastify({ node: $("#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 $(splitButtonsNotification.toastElement) .find('[data-dismiss="notification"]') .on("click", function () { splitButtonsNotification.hideToast(); }); });

Notification With Buttons Below

Show example code

  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="notification-with-buttons-below-content" class="toastify-content hidden flex"HTMLCloseTag HTMLOpenTagi data-lucide="file-text"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="ml-4 mr-5 sm:mr-20"HTMLCloseTag HTMLOpenTagdiv class="font-medium"HTMLCloseTagRobert De NiroHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-slate-500 mt-1"HTMLCloseTagSent you new documents.HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-2.5"HTMLCloseTag HTMLOpenTaga class="btn btn-primary py-1 px-2 mr-2" href=""HTMLCloseTagPreviewHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga class="btn btn-outline-secondary py-1 px-2" href=""HTMLCloseTagDownloadHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Notification Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag HTMLOpenTagbutton id="notification-with-buttons-below-toggle" class="btn btn-primary"HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag

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

Dark Mode