Toast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Basic Example

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display:flex , allowing easy alignment of content thanks to our margin and flexbox utilities. 

<div
aria-live="assertive"
   aria-atomic="true"
   class="toast fade show border border-gray-300 flex flex-col w-full max-w-xs text-gray-500 bg-white rounded-lg"
   role="alert">
   <div class="flex items-center w-full border-b border-gray-300 p-3 justify-between">
      <h4 class="text-gray-800">Tailwind CSS</h4>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="toast" aria-label="Close">
         <span class="sr-only">Close</span>
         <svg
            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"
            class="feather feather-x">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
         </svg>
      </button>
   </div>
   <div class="p-3">
      <p>Hello, world! This is a toast message.</p>
   </div>
 </div>

Live Toast

Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.

<button
                                    type="button"
                                    class="btn bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300"
                                    id="liveToastBtn">
                                    Show live toast
   </button>
   <div class="toast-container fixed top-0 right-0 p-3">
      <div
         id="liveToast"
         aria-live="assertive"
         aria-atomic="true"
         class="toast border border-gray-300 flex flex-col w-full max-w-xs text-gray-500 bg-white rounded-lg"
         role="alert">
         <div class="flex items-center w-full border-b border-gray-300 p-3 justify-between">
            <h4 class="text-gray-800">Tailwind CSS</h4>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="toast" aria-label="Close">
               <span class="sr-only">Close</span>
               <svg
                  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"
                  class="feather feather-x">
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
               </svg>
            </button>
         </div>
         <div class="p-3">
            <p>Hello, world! This is a toast message.</p>
         </div>
      </div>
   </div>