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

  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-theme-1 dark:text-gray-500 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 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

  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="success-notification-content" class="toastify-content hidden flex"HTMLCloseTag HTMLOpenTagi class="text-theme-9" data-feather="check-circle"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="ml-4 mr-4"HTMLCloseTag HTMLOpenTagdiv class="font-medium"HTMLCloseTagMessage Saved!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 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 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

  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="notification-with-actions-content" class="toastify-content hidden flex"HTMLCloseTag HTMLOpenTagi data-feather="hard-drive"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="ml-4 mr-4"HTMLCloseTag HTMLOpenTagdiv class="font-medium"HTMLCloseTagStorage Removed!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 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-theme-1 dark:text-gray-500" href=""HTMLCloseTagRestart NowHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga class="text-gray-600 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 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

  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="Midone Tailwind HTML Admin Template" src="dist/images/profile-13.jpg"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="ml-4 sm:mr-28"HTMLCloseTag HTMLOpenTagdiv class="font-medium"HTMLCloseTagRobert De NiroHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 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-gray-200 dark:border-dark-5 font-medium text-theme-1 dark:text-gray-500" 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 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

  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-gray-600 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-gray-200 dark:border-dark-5"HTMLCloseTag HTMLOpenTaga 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:;"HTMLCloseTagView DetailsHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga data-dismiss="notification" class="flex-1 flex items-center justify-center px-6 font-medium text-gray-600" 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 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

  HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag HTMLOpenTagdiv id="notification-with-buttons-below-content" class="toastify-content hidden flex"HTMLCloseTag HTMLOpenTagi data-feather="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-gray-600 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 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