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
            <div class="text-center">
    <!-- BEGIN: Notification Content -->
    <div 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">
        <div class="font-medium">
            Yay! Updates Published!
        </div>
        <a class="mt-1 font-medium text-primary dark:text-slate-400 sm:ml-40 sm:mt-0" href="">
            Review Changes
        </a>
    </div>
    <!-- END: Notification Content -->
    <!-- BEGIN: Notification Toggle -->
    <button 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">Show Non Sticky Notification</button>
    <button 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">Show Sticky Notification</button>
    <!-- END: Notification Toggle -->
</div>
        
            // 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
            <div class="text-center">
    <!-- BEGIN: Notification Content -->
    <div 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">
        <i data-tw-merge data-lucide="check-circle" class="stroke-[1] w-5 h-5 text-success text-success"></i>
        <div class="ml-4 mr-4">
            <div class="font-medium">Message Saved!</div>
            <div class="mt-1 text-slate-500">
                The message will be sent in 5 minutes.
            </div>
        </div>
    </div>
    <!-- END: Notification Content -->
    <!-- BEGIN: Notification Toggle -->
    <button 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">Show Notification</button>
    <!-- END: Notification Toggle -->
</div>
        
            // 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
            <div class="text-center">
    <!-- BEGIN: Notification Content -->
    <div 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">
        <i data-tw-merge data-lucide="hard-drive" class="stroke-[1] w-5 h-5"></i>
        <div class="ml-4 mr-4">
            <div class="font-medium">Storage Removed!</div>
            <div class="mt-1 text-slate-500">
                The server will restart in 30 seconds, don't make
                <br>
                changes during the update process!
            </div>
            <div class="mt-1.5 flex font-medium">
                <a class="text-primary dark:text-slate-400" href="">
                    Restart Now
                </a>
                <a class="ml-3 text-slate-500" href="">
                    Cancel
                </a>
            </div>
        </div>
    </div>
    <!-- END: Notification Content -->
    <!-- BEGIN: Notification Toggle -->
    <button 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">Show Notification</button>
    <!-- END: Notification Toggle -->
</div>
        
            // 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
            <div class="text-center">
    <!-- BEGIN: Notification Content -->
    <div 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">
        <div class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full">
            <img src="dist/images/products/product6-400x400.jpg" alt="Tailwise - Admin Dashboard Template">
        </div>
        <div class="ml-4 sm:mr-28">
            <div class="font-medium">
                Tom Hanks
            </div>
            <div class="mt-1 text-slate-500">
                See you later! ๐Ÿ˜ƒ๐Ÿ˜ƒ๐Ÿ˜ƒ
            </div>
        </div>
        <a 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="#">
            Reply
        </a>
    </div>
    <!-- END: Notification Content -->
    <!-- BEGIN: Notification Toggle -->
    <button 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">Show Notification</button>
    <!-- END: Notification Toggle -->
</div>
        
            // 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
            <div class="text-center">
    <!-- BEGIN: Notification Content -->
    <div 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">
        <div class="sm:mr-40">
            <div class="font-medium">
                Introducing new theme
            </div>
            <div class="mt-1 text-slate-500">
                Release version 2.3.3
            </div>
        </div>
        <div class="absolute bottom-0 right-0 top-0 flex flex-col border-l border-slate-200/60 dark:border-darkmode-400">
            <a 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="#">
                View Details
            </a>
            <a class="flex flex-1 items-center justify-center px-6 font-medium text-slate-500" data-dismiss="notification" href="#">
                Dismiss
            </a>
        </div>
    </div>
    <!-- END: Notification Content -->
    <!-- BEGIN: Notification Toggle -->
    <button 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">Show Notification</button>
    <!-- END: Notification Toggle -->
</div>
        
            // 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
            <div class="text-center">
    <!-- BEGIN: Notification Content -->
    <div 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">
        <i data-tw-merge data-lucide="file-text" class="stroke-[1] w-5 h-5"></i>
        <div class="ml-4 mr-5 sm:mr-20">
            <div class="font-medium">
                Tom Hanks
            </div>
            <div class="mt-1 text-slate-500">
                Sent you new documents.
            </div>
            <div class="mt-2.5">
                <a 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">Preview</a>
                <a 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">Download</a>
            </div>
        </div>
    </div>
    <!-- END: Notification Content -->
    <!-- BEGIN: Notification Toggle -->
    <button 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">Show Notification</button>
    <!-- END: Notification Toggle -->
</div>
        
            // 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.