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">
                                    <h4 class="text-gray-800">Tailwind CSS</h4>
                                    <button
                                       type="button"
                                       class="btn-close ms-auto -mx-1.5 -my-1.5
                                          bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2
                                          focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center
                                          justify-center h-8 w-8 "
                                       data-bs-dismiss="toast"
                                       aria-label="Close"
                                       >
                                    <span class="sr-only">Close</span>
                                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                                    </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">
                                    <h4 class="text-gray-800">Tailwind CSS</h4>
                                    <button
                                       type="button"
                                       class="btn-close ms-auto -mx-1.5 -my-1.5
                                          bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2
                                          focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center
                                          justify-center h-8 w-8 "
                                       data-bs-dismiss="toast"
                                       aria-label="Close"
                                       >
                                    <span class="sr-only">Close</span>
                                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                                    </svg>
                                    </button>
                                    </div>
                                    <div class="p-3">
                                    <p>Hello, world! This is a toast
                                    message.</p>
                                    </div>
                                    </div>
                                    </div>
Buy Pro