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.

<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.0.1"></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

Vertically stacking multiple toasts in a readable manner.

Theme:

<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.0.1"></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 color variants

The default form of solid color toasts.

Theme:

<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 color variants

The default form of soft color toasts.

Theme:

<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.0.1"></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.

Message with loading indicator

Display a global loading indicator, which is dismissed by itself asynchronously.

Theme:

With actions

Add additional controls and components to toasts.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" 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 class="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">
                                Don't allow
                              </button>
                              <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline">
                                Allow
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="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">
                                Don't allow
                              </button>
                              <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline">
                                Allow
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>

Stack

Vertically stacking multiple toasts in a readable manner.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" 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 class="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">
                                Don't allow
                              </button>
                              <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline">
                                Allow
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>

<div class="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>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="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">
                                Don't allow
                              </button>
                              <button type="button" class="text-primary decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline">
                                Allow
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>

Avatar

You can also add additional elements, such as an avatar image.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" 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 class="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 end-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 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">
                                Mark as read
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="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 end-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 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">
                                Mark as read
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>

Progress

You can also add additional elements, such as an icon and a progress bar.

Theme:

<button type="button" class="absolute top-3 end-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 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 class="block mb-1.5 text-xs text-muted-foreground-1">57% · 5 seconds left</span>
                              <div 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 class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 57%"></div>
                              </div>
                            </div>
                            
                          </div>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="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

Display a notification message at any place of the viewport.

Theme:

<div class="absolute top-0 start-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 end-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 start-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 start-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 start-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 end-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.0.1"></script>
                        </body>
                      </html>

<div class="absolute top-0 start-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>

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.

Learn more

Use dismiss-alert to dismiss a content.

Theme:

<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.0.1"></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 dynamic toasts.

Theme:

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 end-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 end-0 sm:end-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 end-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 end-0 sm:end-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>

Tailwind CSS Toasts

Basic usage

Example

Condensed

Color variants

Solid color variants

Soft color variants

Message with loading indicator

With actions

Stack

Avatar

Progress

Placement

Dismiss button

Requires JS

JavaScript Behavior

Requires Additional Installation

On this page