Notification
Basic Notification

Notifications provide a way to communicate important messages or updates to your users. This section covers two types of basic notifications: non-sticky and sticky notifications.

Example code / preview
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="basic-non-sticky-notification-content" class="py-5 pl-5 pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex-col sm:flex-row flex flex-col sm:flex-row"HTMLCloseTag
    HTMLOpenTagdiv class="font-medium"HTMLCloseTag
                                                            Yay! Updates Published!
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTaga
                                                            class="mt-1 font-medium text-primary dark:text-slate-400 sm:ml-40 sm:mt-0"
                                                            href=""
                                                        HTMLCloseTag
                                                            Review Changes
                                                        HTMLOpenTag/aHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag!-- END: Notification Content --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="basic-non-sticky-notification-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mr-1 mr-1"
HTMLCloseTagShow Non Sticky NotificationHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="basic-sticky-notification-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mt-2 sm:mt-0 mt-2 sm:mt-0"
HTMLCloseTagShow Sticky NotificationHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        
            
                // 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();
                                                });
            
        

Basic notifications are a simple yet effective way to inform users about important updates or actions they need to take. Whether you choose non-sticky or sticky notifications depends on the urgency and user experience you want to provide. Experiment with different styles and messages to create notifications that enhance your application's usability.

Success Notification

Success notifications are a way to provide positive feedback to users when they perform actions successfully. This section demonstrates how to create and use success notifications.

Example code / preview
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="success-notification-content" class="py-5 pl-5 pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
    HTMLOpenTagi
    data-tw-merge
    data-lucide="check-circle"
    class="stroke-[1] w-5 h-5 text-success text-success"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        HTMLOpenTagdiv class="ml-4 mr-4"HTMLCloseTag
                                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTagMessage Saved!HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                                The message will be sent in 5 minutes.
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag!-- END: Notification Content --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="success-notification-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        
            
                // 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();
                                                });
            
        

Success notifications play a vital role in enhancing the user experience by providing immediate feedback on successful actions. They help users understand that their actions were completed successfully, increasing their confidence in your application. Consider using success notifications for actions like saving data, completing tasks, or successful submissions. Customize the message and style to align with your application's branding and user expectations.

Notification with Actions

Notifications with actions allow you to provide users with clear options to take after receiving a notification. This section demonstrates how to create and use notifications with actions.

Example code / preview
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="notification-with-actions-content" class="py-5 pl-5 pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
    HTMLOpenTagi
    data-tw-merge
    data-lucide="hard-drive"
    class="stroke-[1] w-5 h-5"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        HTMLOpenTagdiv class="ml-4 mr-4"HTMLCloseTag
                                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTagStorage Removed!HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                                The server will restart in 30 seconds, don't make
                                                                HTMLOpenTagbrHTMLCloseTag
                                                                changes during the update process!
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-1.5 flex font-medium"HTMLCloseTag
                                                                HTMLOpenTaga
                                                                    class="text-primary dark:text-slate-400"
                                                                    href=""
                                                                HTMLCloseTag
                                                                    Restart Now
                                                                HTMLOpenTag/aHTMLCloseTag
                                                                HTMLOpenTaga
                                                                    class="ml-3 text-slate-500"
                                                                    href=""
                                                                HTMLCloseTag
                                                                    Cancel
                                                                HTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag!-- END: Notification Content --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="notification-with-actions-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        
            
                // 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();
                                                });
            
        

Notifications with actions are a powerful way to engage users and guide them on the next steps they can take. These notifications are particularly useful for critical alerts or situations where user interaction is required. By providing clear and relevant action buttons, you can help users make informed decisions and take appropriate actions. Customize the message, icons, and actions to match your application's requirements and user needs.

Notification with Avatar

Notifications with avatars allow you to personalize notifications by including user avatars or profile pictures. This section demonstrates how to create and use notifications with avatars.

Example code / preview
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="notification-with-avatar-content" class="py-5 pl-5 pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
    HTMLOpenTagdiv
                                                            class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full"HTMLCloseTag
                                                            HTMLOpenTagimg
                                                                src="dist/images/products/product8-400x400.jpg"
                                                                alt="Tailwise - Admin Dashboard Template"
                                                            HTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="ml-4 sm:mr-28"HTMLCloseTag
                                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTag
                                                                Meryl Streep
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                                See you later! 😃😃😃
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTaga
                                                            class="absolute bottom-0 right-0 top-0 flex items-center border-l border-slate-200/60 px-6 font-medium text-primary dark:border-darkmode-400 dark:text-slate-400"
                                                            data-dismiss="notification"
                                                            href="#"
                                                        HTMLCloseTag
                                                            Reply
                                                        HTMLOpenTag/aHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag!-- END: Notification Content --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="notification-with-avatar-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        
            
                // 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();
                                                });
                                                });
            
        

Notifications with avatars add a personal touch to your notifications, making them more engaging and relatable to users. You can use avatars to identify the sender or source of the notification, creating a more user-friendly and interactive experience. Customize the avatar, user information, and message to match your application's context and user interactions.

Notification with Split Buttons

Notifications with split buttons allow you to provide multiple action options within a single notification. This section demonstrates how to create and use notifications with split buttons.

Example code / preview
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="notification-with-split-buttons-content" class="py-5 pl-5 pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
    HTMLOpenTagdiv class="sm:mr-40"HTMLCloseTag
                                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTag
                                                                Introducing new theme
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                                Release version 2.3.3
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
                                                            class="absolute bottom-0 right-0 top-0 flex flex-col border-l border-slate-200/60 dark:border-darkmode-400"HTMLCloseTag
                                                            HTMLOpenTaga
                                                                class="flex flex-1 items-center justify-center border-b border-slate-200/60 px-6 font-medium text-primary dark:border-darkmode-400 dark:text-slate-400"
                                                                href="#"
                                                            HTMLCloseTag
                                                                View Details
                                                            HTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTaga
                                                                class="flex flex-1 items-center justify-center px-6 font-medium text-slate-500"
                                                                data-dismiss="notification"
                                                                href="#"
                                                            HTMLCloseTag
                                                                Dismiss
                                                            HTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag!-- END: Notification Content --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="notification-with-split-buttons-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        
            
                // 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();
                                                });
                                                });
            
        

Notifications with split buttons enhance user interaction by offering multiple actions within a single notification. This feature is useful for providing users with choices or quick access to relevant actions without cluttering the notification interface. Customize the buttons and actions to suit your application's needs and provide a seamless user experience.

Notification with Buttons Below

Notifications with buttons below allow you to include action buttons directly beneath the notification content. This section demonstrates how to create and use notifications with buttons below.

Example code / preview
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag
                                                    HTMLOpenTagdiv
    id="notification-with-buttons-below-content" class="py-5 pl-5 pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
    HTMLOpenTagi
    data-tw-merge
    data-lucide="file-text"
    class="stroke-[1] w-5 h-5"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        HTMLOpenTagdiv class="ml-4 mr-5 sm:mr-20"HTMLCloseTag
                                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTag
                                                                Meryl Streep
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                                Sent you new documents.
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-2.5"HTMLCloseTag
                                                                HTMLOpenTaga
    data-tw-merge
    href="" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mr-2 px-2 py-1 mr-2 px-2 py-1"
HTMLCloseTagPreviewHTMLOpenTag/aHTMLCloseTag
                                                                HTMLOpenTaga
    data-tw-merge
    href="" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 px-2 py-1 px-2 py-1"
HTMLCloseTagDownloadHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag!-- END: Notification Content --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    id="notification-with-buttons-below-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag
                                                    HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        
            
                // 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();
                                                });
            
        

Notifications with buttons below enhance user engagement by placing actionable buttons directly beneath the notification message. This design allows users to quickly respond or take specific actions related to the notification's content. Customize the buttons and content to suit your application's needs and provide a seamless user experience.

Component API

In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.

Below is a list of props that can be passed to the component:

Dialog
Prop Type Description
`options` `Options` An object containing options for configuring the notification behavior. Explore all the available APIs through the following helpful documentation links https://apvarun.github.io/toastify-js/ .
`getRef` `(el: NotificationElement) => void` A callback function to receive a reference to the NotificationElement.