Tailwind CSS 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.
Tailwind CSS
Hello, world! This is a toast message.
<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 justify-between w-full border-b border-gray-300 px-3 py-2">
<h4 class="text-gray-800 text-base">Tailwind CSS</h4>
<button type="button" class="btn-close text-inherit" data-bs-dismiss="toast" aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-x text-gray-700"
width="16"
height="16"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</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.
Tailwind CSS
Hello, world! This is a toast message.
<button
type="button"
class="btn bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-green-800 hover:border-green-800 active:bg-green-800 active:border-green-800 focus:outline-none focus:ring-4 focus:ring-green-300"
id="liveToastBtn"
>
Show live toast
</button>
<div class="toast-container fixed bottom-0 right-0 p-3 z-50">
<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 justify-between w-full border-b border-gray-300 px-3 py-2">
<h4 class="text-gray-800 text-base">Tailwind CSS</h4>
<button type="button" class="btn-close text-inherit" data-bs-dismiss="toast" aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-x text-gray-700"
width="16"
height="16"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="p-3">
<p>Hello, world! This is a toast message.</p>
</div>
</div>
</div>