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>