- Components
- Toasts
Components
Tailwind CSS Toasts
Push notifications to your visitors with Tailwind CSS toast, a lightweight and easily customizable alert message. Add icons, progress bar, dismiss buttons and more.
Example
A basic form of the toasts.
This is a normal message.
This is a success message.
This is an error message.
This is a warning message.
Solid color variants
The default form of solid color toasts.
Soft color variants
The default form of soft color toasts.
Message with loading indicator
Display a global loading indicator, which is dismissed by itself asynchronously.
Action in progress
With actions
Add additional controls and components to toasts.
App notifications
Stack
Vertically stacking multiple toasts in a readable manner.
App notifications
Your app preferences has been successfully updated.
Avatar
You can also add additional elements, such as an avatar image.
James mentioned you in a comment
Progress
You can also add additional elements, such as an icon and a progress bar.
Uploading 3 files
Placement
Display a notification message at any place of the viewport.
Top left
Top center
Top right
Center
Bottom left
Bottom center
Bottom right
Dismiss button
Requires JS
Note that this component requires the use of our Remove Element plugin, else you can skip this message if you are already using Preline UI as a package.
Use dismiss-alert to dismiss a content.
JavaScript Behavior New
Requires Additional Installation
Note that this feature requires the use of the third-party Toastify plugin.
Use Toastify to create dynamic toasts.
function tostifyCustomClose(el) {
const parent = el.closest('.toastify');
const close = parent.querySelector('.toast-close');
close.click();
}
window.addEventListener('load', () => {
(function() {
let i = 0;
const callToast = document.querySelector("#hs-new-toast");
const toastMarkup1 = `
<div class="max-w-xs relative bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-neutral-800 dark:border-neutral-700" role="alert" tabindex="-1" aria-labelledby="hs-toast-avatar-label">
<div class="flex p-4">
<div class="shrink-0">
<img class="inline-block size-8 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
<button onclick="tostifyCustomClose(this)" type="button" class="absolute top-3 end-3 inline-flex shrink-0 justify-center items-center size-5 rounded-lg text-gray-800 opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100 dark:text-white" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
</button>
</div>
<div class="ms-4 me-5">
<h3 id="hs-toast-avatar-label" class="text-gray-800 font-medium text-sm dark:text-white">
<span class="font-semibold">James</span> mentioned you in a comment
</h3>
<div class="mt-1 text-sm text-gray-600 dark:text-neutral-400">
Nice work! Keep it up!
</div>
<div class="mt-3">
<button type="button" class="text-blue-600 decoration-2 hover:underline font-medium text-sm focus:outline-none focus:underline dark:text-blue-500">
Mark as read
</button>
</div>
</div>
</div>
</div>
`;
const toastMarkup2 = `
<div class="flex p-4">
<p class="text-sm text-gray-700 dark:text-neutral-400">Your email has been sent</p>
<div class="ms-auto">
<button onclick="tostifyCustomClose(this)" type="button" class="inline-flex shrink-0 justify-center items-center size-5 rounded-lg text-gray-800 opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100 dark:text-white" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
</button>
</div>
</div>
`;
callToast.addEventListener("click", () => {
Toastify({
text: i % 3 ? toastMarkup1 : toastMarkup2,
className: "hs-toastify-on:opacity-100 opacity-0 fixed -top-[150px] right-[20px] z-[90] transition-all duration-300 w-[320px] bg-white text-sm text-gray-700 border border-gray-200 rounded-xl shadow-lg [&>.toast-close]:hidden dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400",
duration: 3000,
close: true,
escapeMarkup: false
}).showToast();
i++;
});
})();
});
