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.

Default toast

Use a default toast for short, self-contained notification messages.

<div class="max-w-xs w-full p-4 bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-success-example-label">
                            <div class="flex gap-x-3">
                              <svg class="shrink-0 size-4 text-teal-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                              </svg>
                              <div class="grow">
                                <p id="hs-toast-success-example-label" class="text-sm text-layer-foreground">
                                  This is a success message.
                                </p>
                              </div>
                            </div>
                          </div>

<div class="max-w-xs w-full p-4 bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-error-example-label">
                            <div class="flex gap-x-3">
                              <svg class="shrink-0 size-4 text-red-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
                              </svg>
                              <div class="grow">
                                <p id="hs-toast-error-example-label" class="text-sm text-layer-foreground">
                                  This is an error message.
                                </p>
                              </div>
                            </div>
                          </div>

<div class="max-w-xs w-full p-4 bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-warning-example-label">
                            <div class="flex gap-x-3">
                              <svg class="shrink-0 size-4 text-yellow-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                              </svg>
                              <div class="grow">
                                <p id="hs-toast-warning-example-label" class="text-sm text-layer-foreground">
                                  This is a warning message.
                                </p>
                              </div>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div class="max-w-xs w-full p-4 bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-normal-example-label">
                            <div class="flex gap-x-3">
                              <svg class="shrink-0 size-4 text-primary mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
                              </svg>
                              <div class="grow">
                                <p id="hs-toast-normal-example-label" class="text-sm text-layer-foreground">
                                  This is a normal message.
                                </p>
                              </div>
                            </div>
                          </div>

Condensed toast

Use a condensed toast layout when several notifications need to appear together without taking up too much space.

<div class="ms-auto flex items-center space-x-3">
                                <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline">
                                  Undo
                                </button>
                                <button type="button" class="shrink-0 flex justify-center items-center size-5 text-muted-foreground focus:outline-hidden" 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 d="m6 6 12 12"/></svg>
                                </button>
                              </div>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div id="hs-toast-condensed" class="max-w-xs w-full bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-condensed-label">
                            <div class="flex p-4">
                              <p id="hs-toast-condensed-label" class="text-sm text-layer-foreground">
                                Your email has been sent
                              </p>

Color variants

Solid variants

Use solid fills for high-emphasis toast messages.

<div class="ms-auto">
                                <button type="button" class="shrink-0 flex justify-center items-center size-5 text-secondary-foreground opacity-50 hover:opacity-100 focus:outline-hidden" 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 d="m6 6 12 12"/></svg>
                                </button>
                              </div>
                            </div>
                          </div>

<div class="max-w-xs w-full bg-surface-4 text-sm text-foreground-inverse rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-solid-color-gray-label">
                            <div id="hs-toast-solid-color-gray-label" class="flex p-4">
                              Hello, world! This is a toast message.

<div class="ms-auto">
                                <button type="button" class="shrink-0 flex justify-center items-center size-5 text-foreground-inverse opacity-50 hover:opacity-100 focus:outline-hidden" 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 d="m6 6 12 12"/></svg>
                                </button>
                              </div>
                            </div>
                          </div>

<div class="max-w-xs w-full bg-teal-500 text-sm text-foreground-inverse rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-solid-color-teal-label">
                            <div id="hs-toast-solid-color-teal-label" class="flex p-4">
                              Hello, world! This is a toast message.

<div class="max-w-xs w-full bg-primary text-sm text-primary-foreground rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-solid-color-blue-label">
                            <div id="hs-toast-solid-color-blue-label" class="flex p-4">
                              Hello, world! This is a toast message.

<div class="max-w-xs w-full bg-red-500 text-sm text-foreground-inverse rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-solid-color-red-label">
                            <div id="hs-toast-solid-color-red-label" class="flex p-4">
                              Hello, world! This is a toast message.

<div class="max-w-xs w-full bg-yellow-500 text-sm text-foreground-inverse rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-solid-color-yellow-label">
                            <div id="hs-toast-solid-color-yellow-label" class="flex p-4">
                              Hello, world! This is a toast message.

<div class="max-w-xs w-full bg-secondary text-sm text-secondary-foreground rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-solid-color-dark-label">
                            <div id="hs-toast-solid-color-dark-label" class="flex p-4">
                              Hello, world! This is a toast message.

Soft variants

Use soft fills for lighter notification styles.

<div class="ms-auto">
                                <button type="button" class="shrink-0 flex justify-center items-center size-5 text-foreground opacity-50 hover:opacity-100 focus:outline-hidden dark:text-foreground" 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 d="m6 6 12 12"/></svg>
                                </button>
                              </div>
                            </div>
                          </div>

<div class="max-w-xs w-full bg-muted border border-line-2 text-sm text-muted-foreground-2 rounded-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-soft-color-gray-label">
                            <div id="hs-toast-soft-color-gray-label" class="flex p-4">
                              Hello, world! This is a toast message.

<div class="ms-auto">
                                <button type="button" class="shrink-0 flex justify-center items-center size-5 text-muted-foreground-1 opacity-50 hover:opacity-100 focus:outline-hidden dark:text-muted-foreground-1" 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 d="m6 6 12 12"/></svg>
                                </button>
                              </div>
                            </div>
                          </div>

<div class="max-w-xs w-full bg-teal-100 border border-teal-200 text-sm text-teal-800 rounded-lg dark:bg-teal-500/20 dark:border-teal-900 dark:text-teal-400" role="alert" tabindex="-1" aria-labelledby="hs-toast-soft-color-teal-label">
                            <div id="hs-toast-soft-color-teal-label" class="flex p-4">
                              Hello, world! This is a toast message.

<div class="ms-auto">
                                <button type="button" class="shrink-0 flex justify-center items-center size-5 text-teal-800 opacity-50 hover:opacity-100 focus:outline-hidden dark:text-teal-400" 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 d="m6 6 12 12"/></svg>
                                </button>
                              </div>
                            </div>
                          </div>

<div class="max-w-xs w-full bg-primary-100 border border-primary-200 text-sm text-primary-800 rounded-lg dark:bg-primary-500/20 dark:border-primary-900 dark:text-primary-400" role="alert" tabindex="-1" aria-labelledby="hs-toast-soft-color-blue-label">
                            <div id="hs-toast-soft-color-blue-label" class="flex p-4">
                              Hello, world! This is a toast message.

<div class="ms-auto">
                                <button type="button" class="shrink-0 flex justify-center items-center size-5 text-primary-800 opacity-50 hover:opacity-100 focus:outline-hidden dark:text-primary-400" 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 d="m6 6 12 12"/></svg>
                                </button>
                              </div>
                            </div>
                          </div>

<div class="max-w-xs w-full bg-red-100 border border-red-200 text-sm text-red-800 rounded-lg dark:bg-red-500/20 dark:border-red-900 dark:text-red-400 dark:text-red-400" role="alert" tabindex="-1" aria-labelledby="hs-toast-soft-color-red-label">
                            <div id="hs-toast-soft-color-red-label" class="flex p-4">
                              Hello, world! This is a toast message.

<div class="ms-auto">
                                <button type="button" class="shrink-0 flex justify-center items-center size-5 text-red-800 opacity-50 hover:opacity-100 focus:outline-hidden" 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 d="m6 6 12 12"/></svg>
                                </button>
                              </div>
                            </div>
                          </div>

<div class="max-w-xs w-full bg-yellow-100 border border-yellow-200 text-sm text-yellow-800 rounded-lg dark:bg-yellow-500/20 dark:border-yellow-900 dark:text-yellow-400" role="alert" tabindex="-1" aria-labelledby="hs-toast-soft-color-yellow-label">
                            <div id="hs-toast-soft-color-yellow-label" class="flex p-4">
                              Hello, world! This is a toast message.

<div class="ms-auto">
                                <button type="button" class="shrink-0 flex justify-center items-center size-5 text-yellow-800 opacity-50 hover:opacity-100 focus:outline-hidden dark:text-yellow-400" 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 d="m6 6 12 12"/></svg>
                                </button>
                              </div>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div class="max-w-xs w-full bg-surface border border-line-2 text-sm text-surface-foreground rounded-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-soft-color-dark-label">
                            <div id="hs-toast-soft-color-dark-label" class="flex p-4">
                              Hello, world! This is a toast message.

Toast with loading indicator

Show a loading toast for async actions that update in place or resolve on their own.

Toast with actions

Add buttons or links when a toast needs immediate follow-up actions.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xl mx-auto mt-5 flex flex-col justify-center items-center gap-2">
                          <div id="hs-toast-with-icons" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 max-w-xs w-full bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-with-icons-label">
                            <div class="flex gap-x-3 p-4">
                              <svg class="shrink-0 size-5 text-muted-foreground-2 mt-1" 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="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                              <div class="grow">
                                <h3 id="hs-toast-with-icons-label" class="text-layer-foreground font-semibold">
                                  App notifications
                                </h3>
                                <div class="mt-1 text-sm text-muted-foreground-2">
                                  Notifications may include alerts, sounds and icon badges.
                                </div>
                                <div class="mt-4 flex gap-x-3">
                                  <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline" data-hs-remove-element="#hs-toast-with-icons">
                                    Don't allow
                                  </button>
                                  <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline" data-hs-remove-element="#hs-toast-with-icons">
                                    Allow
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div id="hs-toast-with-icons" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 max-w-xs w-full bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-with-icons-label">
                            <div class="flex gap-x-3 p-4">
                              <svg class="shrink-0 size-5 text-muted-foreground-2 mt-1" 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="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                              <div class="grow">
                                <h3 id="hs-toast-with-icons-label" class="text-layer-foreground font-semibold">
                                  App notifications
                                </h3>
                                <div class="mt-1 text-sm text-muted-foreground-2">
                                  Notifications may include alerts, sounds and icon badges.
                                </div>
                                <div class="mt-4 flex gap-x-3">
                                  <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline" data-hs-remove-element="#hs-toast-with-icons">
                                    Don't allow
                                  </button>
                                  <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline" data-hs-remove-element="#hs-toast-with-icons">
                                    Allow
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>

Toast stack

Stack multiple toasts vertically so each message remains readable.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xl mx-auto mt-5 flex flex-col justify-center items-center gap-4">
                          <div id="hs-toast-stack-permissions" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 max-w-xs w-full bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-stack-toggle-label">
                            <div class="flex gap-3 p-4">
                              <svg class="shrink-0 size-5 text-muted-foreground-2 mt-1" 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="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                              <div class="grow">
                                <h3 id="hs-toast-stack-toggle-label" class="text-layer-foreground font-semibold">
                                  App notifications
                                </h3>
                                <div class="mt-1 text-sm text-muted-foreground-2">
                                  Notifications may include alerts, sounds and icon badges.
                                </div>
                                <div class="mt-4 flex gap-x-3">
                                  <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline" data-hs-remove-element="#hs-toast-stack-permissions">
                                    Don't allow
                                  </button>
                                  <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline" data-hs-remove-element="#hs-toast-stack-permissions">
                                    Allow
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>

<div id="hs-toast-stack-update" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 max-w-xs w-full bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-stack-toggle-update-label">
                            <div class="flex gap-3 p-4">
                              <svg class="shrink-0 size-4 text-teal-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                              </svg>
                              <div class="grow">
                                <p id="hs-toast-stack-toggle-update-label" class="text-sm text-layer-foreground">
                                  Your app preferences has been successfully updated.
                                </p>
                              </div>
                              <div class="ms-auto">
                                <button type="button" class="inline-flex shrink-0 justify-center items-center size-5 rounded-lg text-layer-foreground opacity-50 hover:opacity-100 focus:outline-hidden focus:opacity-100" aria-label="Close" data-hs-remove-element="#hs-toast-stack-update">
                                  <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 d="m6 6 12 12"/></svg>
                                </button>
                              </div>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div id="hs-toast-stack-permissions" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 max-w-xs w-full bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-stack-toggle-label">
                            <div class="flex gap-3 p-4">
                              <svg class="shrink-0 size-5 text-muted-foreground-2 mt-1" 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="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                              <div class="grow">
                                <h3 id="hs-toast-stack-toggle-label" class="text-layer-foreground font-semibold">
                                  App notifications
                                </h3>
                                <div class="mt-1 text-sm text-muted-foreground-2">
                                  Notifications may include alerts, sounds and icon badges.
                                </div>
                                <div class="mt-4 flex gap-x-3">
                                  <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline" data-hs-remove-element="#hs-toast-stack-permissions">
                                    Don't allow
                                  </button>
                                  <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline" data-hs-remove-element="#hs-toast-stack-permissions">
                                    Allow
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>

Toast with avatar

Add an avatar when the toast relates to a person, sender, or account.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xl mx-auto mt-5 flex flex-col justify-center items-center gap-4">
                          <div id="hs-toast-avatar" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 max-w-xs w-full relative bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-avatar-label">
                            <div class="flex gap-x-3 p-4">
                              <img class="shrink-0 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 type="button" class="absolute top-3 inset-e-3 inline-flex shrink-0 justify-center items-center size-5 rounded-lg text-layer-foreground opacity-50 hover:opacity-100 focus:outline-hidden focus:opacity-100" aria-label="Close" data-hs-remove-element="#hs-toast-avatar">
                                <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 d="m6 6 12 12"/></svg>
                              </button>
                              <div class="grow pe-4">
                                <h3 id="hs-toast-avatar-label" class="text-layer-foreground font-medium text-sm">
                                  <span class="font-semibold">James</span> mentioned you in a comment
                                </h3>
                                <div class="mt-1 text-sm text-muted-foreground-2">
                                  Nice work! Keep it up!
                                </div>
                                <div class="mt-3">
                                  <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline" data-hs-remove-element="#hs-toast-avatar">
                                    Mark as read
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div id="hs-toast-avatar" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 max-w-xs w-full relative bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-avatar-label">
                            <div class="flex gap-x-3 p-4">
                              <img class="shrink-0 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 type="button" class="absolute top-3 inset-e-3 inline-flex shrink-0 justify-center items-center size-5 rounded-lg text-layer-foreground opacity-50 hover:opacity-100 focus:outline-hidden focus:opacity-100" aria-label="Close" data-hs-remove-element="#hs-toast-avatar">
                                <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 d="m6 6 12 12"/></svg>
                              </button>
                              <div class="grow pe-4">
                                <h3 id="hs-toast-avatar-label" class="text-layer-foreground font-medium text-sm">
                                  <span class="font-semibold">James</span> mentioned you in a comment
                                </h3>
                                <div class="mt-1 text-sm text-muted-foreground-2">
                                  Nice work! Keep it up!
                                </div>
                                <div class="mt-3">
                                  <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline" data-hs-remove-element="#hs-toast-avatar">
                                    Mark as read
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>

Toast with progress

Include progress feedback when the toast represents an ongoing task.

<button type="button" class="absolute top-3 inset-e-3 inline-flex shrink-0 justify-center items-center size-5 rounded-lg text-layer-foreground opacity-50 hover:opacity-100 focus:outline-hidden focus:opacity-100" aria-label="Close" data-hs-remove-element="#hs-toast-progress">
                                <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 d="m6 6 12 12"/></svg>
                              </button>

<div class="grow pe-4">
                                <h3 id="hs-toast-progress-label" class="text-layer-foreground font-medium text-sm">
                                  Uploading 3 files
                                </h3>

<div class="mt-2 flex flex-col gap-x-3">
                                  <span id="hs-toast-progress-status" class="block mb-1.5 text-xs text-muted-foreground-1">57% · 5 seconds left</span>
                                  <div id="hs-toast-progress-bar" class="flex w-full h-1 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100">
                                    <div id="hs-toast-progress-bar-pane" class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition-all duration-300" style="width: 57%"></div>
                                  </div>
                                </div>
                                
                              </div>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div id="hs-toast-progress" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 max-w-xs w-full relative bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-progress-label">
                            <div class="flex gap-x-3 p-4">
                              <span class="shrink-0 inline-flex justify-center items-center size-8 rounded-full bg-surface text-surface-foreground">
                                <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="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M12 12v9"/><path d="m16 16-4-4-4 4"/></svg>
                              </span>

Placement

Position toasts anywhere in the viewport to suit the surrounding layout.

<div class="absolute top-0 inset-s-1/2 -translate-x-1/2">
                            <div class="max-w-xs bg-layer border border-layer-line rounded-lg shadow-md" role="alert" tabindex="-1" aria-labelledby="hs-toast-placement-top-center-label">
                              <div class="p-2 sm:p-4">
                                <h3 id="hs-toast-placement-top-center-label" class="text-xs text-layer-foreground font-medium sm:text-base">
                                  Top center
                                </h3>
                              </div>
                            </div>
                          </div>

<div class="absolute top-0 inset-e-2">
                            <div class="max-w-xs bg-layer border border-layer-line rounded-lg shadow-md" role="alert" tabindex="-1" aria-labelledby="hs-toast-placement-top-right-label">
                              <div class="p-2 sm:p-4">
                                <h3 id="hs-toast-placement-top-right-label" class="text-xs text-layer-foreground font-medium sm:text-base">
                                  Top right
                                </h3>
                              </div>
                            </div>
                          </div>

<div class="absolute top-1/2 inset-s-1/2 transform -translate-y-1/2 -translate-x-1/2">
                            <div class="max-w-xs bg-layer border border-layer-line rounded-lg shadow-md" role="alert" tabindex="-1" aria-labelledby="hs-toast-placement-Center-label">
                              <div class="p-2 sm:p-4">
                                <h3 id="hs-toast-placement-Center-label" class="text-xs text-layer-foreground font-medium sm:text-base">
                                  Center
                                </h3>
                              </div>
                            </div>
                          </div>

<div class="absolute bottom-2 inset-s-2">
                            <div class="max-w-xs bg-layer border border-layer-line rounded-lg shadow-md" role="alert" tabindex="-1" aria-labelledby="hs-toast-placement-bottom-left-label">
                              <div class="p-2 sm:p-4">
                                <h3 id="hs-toast-placement-bottom-left-label" class="text-xs text-layer-foreground font-medium sm:text-base">
                                  Bottom left
                                </h3>
                              </div>
                            </div>
                          </div>

<div class="absolute bottom-2 inset-s-1/2 -translate-x-1/2">
                            <div class="max-w-xs bg-layer border border-layer-line rounded-lg shadow-md" role="alert" tabindex="-1" aria-labelledby="hs-toast-placement-bottom-center-label">
                              <div class="p-2 sm:p-4">
                                <h3 id="hs-toast-placement-bottom-center-label" class="text-xs text-layer-foreground font-medium sm:text-base">
                                  Bottom center
                                </h3>
                              </div>
                            </div>
                          </div>

<div class="absolute bottom-2 inset-e-2">
                            <div class="max-w-xs bg-layer border border-layer-line rounded-lg shadow-md" role="alert" tabindex="-1" aria-labelledby="hs-toast-placement-bottom-right-label">
                              <div class="p-2 sm:p-4">
                                <h3 id="hs-toast-placement-bottom-right-label" class="text-xs text-layer-foreground font-medium sm:text-base">
                                  Bottom right
                                </h3>
                              </div>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div class="absolute top-0 inset-s-2">
                            <div class="max-w-xs bg-layer border border-layer-line rounded-lg shadow-md" role="alert" tabindex="-1" aria-labelledby="hs-toast-placement-top-left-label">
                              <div class="p-2 sm:p-4">
                                <h3 id="hs-toast-placement-top-left-label" class="text-xs text-layer-foreground font-medium sm:text-base">
                                  Top left
                                </h3>
                              </div>
                            </div>
                          </div>

Dismissible toast

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.

Learn more

Use dismiss-alert to let users dismiss a toast manually.

<div class="ms-auto">
                                <button type="button" class="inline-flex shrink-0 justify-center items-center size-5 rounded-lg text-layer-foreground opacity-50 hover:opacity-100 focus:outline-hidden focus:opacity-100" aria-label="Close" data-hs-remove-element="#dismiss-toast">
                                  <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 d="m6 6 12 12"/></svg>
                                </button>
                              </div>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div id="dismiss-toast" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 max-w-xs w-full bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-dismiss-button-label">
                            <div class="flex p-4">
                              <p id="hs-toast-dismiss-button-label" class="text-sm text-layer-foreground">
                                Your email has been sent
                              </p>

JavaScript behavior

Requires Additional Installation

Note that this feature requires the use of the third-party Toastify plugin.

Learn more

Use Toastify to create, position, and control dynamic toasts with JavaScript.

close.click();
                              }

window.addEventListener('load', () => {
                                // Tostify
                                (function() {
                                  let i = 0;
                                  const callToast = document.querySelector("#hs-new-toast");
                                  const toastMarkup1 = `
                                    <div class="max-w-xs relative bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-avatar-label">
                                      <div class="flex gap-x-3 p-4">
                                        <img class="shrink-0 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 inset-e-3 inline-flex shrink-0 justify-center items-center size-5 rounded-lg text-layer-foreground opacity-50 hover:opacity-100 focus:outline-hidden focus:opacity-100" 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 class="grow pe-4">
                                          <h3 id="hs-toast-avatar-label" class="text-layer-foreground font-medium text-sm">
                                            <span class="font-semibold">James</span> mentioned you in a comment
                                          </h3>
                                          <div class="mt-1 text-sm text-muted-foreground-2">
                                            Nice work! Keep it up!
                                          </div>
                                          <div class="mt-3">
                                            <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline">
                                              Mark as read
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  `;
                                  const toastMarkup2 = `
                                    <div class="flex gap-x-3 p-4">
                                      <p class="text-sm text-layer-foreground">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-layer-foreground opacity-50 hover:opacity-100 focus:outline-hidden focus:opacity-100" 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-20 sm:-top-37.5 inset-e-0 sm:inset-e-5 z-90 transition-all duration-300 w-80 bg-layer text-sm text-layer-foreground border border-layer-line rounded-xl shadow-lg [&>.toast-close]:hidden",
                                      duration: 3000,
                                      close: true,
                                      escapeMarkup: false
                                    }).showToast();

i++;
                                  });
                                })();
                              });
                            </script>
                          </body>
                        </html>

close.click();
                          }

window.addEventListener('load', () => {
                            // Tostify
                            (function() {
                              let i = 0;
                              const callToast = document.querySelector("#hs-new-toast");
                              const toastMarkup1 = `
                                <div class="max-w-xs relative bg-layer border border-layer-line rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-avatar-label">
                                  <div class="flex gap-x-3 p-4">
                                    <img class="shrink-0 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 inset-e-3 inline-flex shrink-0 justify-center items-center size-5 rounded-lg text-layer-foreground opacity-50 hover:opacity-100 focus:outline-hidden focus:opacity-100" 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 class="grow pe-4">
                                      <h3 id="hs-toast-avatar-label" class="text-layer-foreground font-medium text-sm">
                                        <span class="font-semibold">James</span> mentioned you in a comment
                                      </h3>
                                      <div class="mt-1 text-sm text-muted-foreground-2">
                                        Nice work! Keep it up!
                                      </div>
                                      <div class="mt-3">
                                        <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline">
                                          Mark as read
                                        </button>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              `;
                              const toastMarkup2 = `
                                <div class="flex gap-x-3 p-4">
                                  <p class="text-sm text-layer-foreground">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-layer-foreground opacity-50 hover:opacity-100 focus:outline-hidden focus:opacity-100" 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-20 sm:-top-37.5 inset-e-0 sm:inset-e-5 z-90 transition-all duration-300 w-80 bg-layer text-sm text-layer-foreground border border-layer-line rounded-xl shadow-lg [&>.toast-close]:hidden",
                                  duration: 3000,
                                  close: true,
                                  escapeMarkup: false
                                }).showToast();

i++;
                              });
                            })();
                          });
                        </script>