Components
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
The default form of solid color avatars.
<div class="bg-gray-800 text-sm text-white rounded-md p-4 dark:bg-white dark:text-gray-800" role="alert">
<span class="font-bold">Dark</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-gray-500 text-sm text-white rounded-md p-4" role="alert">
<span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-blue-500 text-sm text-white rounded-md p-4" role="alert">
<span class="font-bold">Info</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-green-500 text-sm text-white rounded-md p-4" role="alert">
<span class="font-bold">Success</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-red-500 text-sm text-white rounded-md p-4" role="alert">
<span class="font-bold">Danger</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-orange-500 text-sm text-white rounded-md p-4" role="alert">
<span class="font-bold">Warning</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-white text-sm text-gray-600 rounded-md p-4" role="alert">
<span class="font-bold">Light</span> alert! You should check in on some of those fields below.
</div>
The default form of soft color avatars.
<div class="bg-gray-50 border border-gray-200 text-sm text-gray-600 rounded-md p-4" role="alert">
<span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-gray-800/[.1] border border-gray-200 text-sm text-gray-600 rounded-md p-4 dark:bg-gray-900/[.1] dark:border-gray-700 dark:text-white" role="alert">
<span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-blue-50 border border-blue-200 text-sm text-blue-600 rounded-md p-4" role="alert">
<span class="font-bold">Info</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-green-50 border border-green-200 text-sm text-green-600 rounded-md p-4" role="alert">
<span class="font-bold">Success</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-red-50 border border-red-200 text-sm text-red-600 rounded-md p-4" role="alert">
<span class="font-bold">Danger</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-orange-50 border border-orange-200 text-sm text-orange-600 rounded-md p-4" role="alert">
<span class="font-bold">Warning</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-white/[.1] border border-white/[.1] text-sm text-gray-600 rounded-md p-4 dark:text-gray-400" role="alert">
<span class="font-bold">Light</span> alert! You should check in on some of those fields below.
</div>
Alerts can also contain additional HTML elements like headings, paragraphs and icons.
<div class="bg-yellow-50 border border-yellow-200 rounded-md p-4" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-4 w-4 text-yellow-400 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
</div>
<div class="ml-4">
<h3 class="text-sm text-yellow-800 font-semibold">
Cannot connect to the database
</h3>
<div class="mt-1 text-sm text-yellow-700">
We are unable to save any progress at this time.
</div>
</div>
</div>
</div>
Similarly you can use lists.
<div class="bg-red-50 border border-red-200 rounded-md p-4" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-4 w-4 text-red-400 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>
<div class="ml-4">
<h3 class="text-sm text-red-800 font-semibold">
A problem has been occurred while submitting your data.
</h3>
<div class="mt-2 text-sm text-red-700">
<ul class="list-disc space-y-1 pl-5">
<li>
This username is already in use
</li>
<li>
Email field can't be empty
</li>
<li>
Please enter a valid phone number
</li>
</ul>
</div>
</div>
</div>
</div>
More actionable alert example.
<div class="bg-blue-50 border border-blue-200 rounded-md p-4" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-4 w-4 text-blue-600 mt-1" 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>
<div class="ml-4">
<h3 class="text-gray-800 font-semibold">
YouTube would like you to send notifications
</h3>
<div class="mt-2 text-sm text-gray-600">
Notifications may include alerts, sounds and icon badges. These can be configured in Settings.
</div>
<div class="mt-4">
<div class="flex space-x-3">
<button type="button" class="inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-medium text-blue-600 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm">
Don't allow
</button>
<button type="button" class="inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-medium text-blue-600 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm">
Allow
</button>
</div>
</div>
</div>
</div>
</div>
Use utility classes to quickly provide matching colored links within any alert.
A new software update is available. See what's new in version 3.0.7
<div class="bg-gray-50 border border-gray-200 rounded-md p-4" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-4 w-4 text-gray-500 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>
<div class="flex-1 md:flex md:justify-between ml-4">
<p class="text-sm text-gray-700">
A new software update is available. See what's new in version 3.0.7
</p>
<p class="text-sm mt-3 md:mt-0 md:ml-6">
<a class="text-gray-700 hover:text-gray-500 font-medium whitespace-nowrap" href="#">Details</a>
</p>
</div>
</div>
</div>
Example of a dismissible button. Requires JavaScript.
Use dismiss-alert to dismiss a content.
Check out the full documentation on Remove element.
<div id="dismiss-alert" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 bg-teal-50 border border-teal-200 rounded-md p-4" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-4 w-4 text-teal-400 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>
<div class="ml-3">
<div class="text-sm text-teal-800 font-medium">
File has been successfully uploaded.
</div>
</div>
<div class="pl-3 ml-auto">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex bg-teal-50 rounded-md p-1.5 text-teal-500 hover:bg-teal-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-teal-50 focus:ring-teal-600" data-hs-remove-element="#dismiss-alert">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z" fill="currentColor"/>
</svg>
</button>
</div>
</div>
</div>
</div>
Use a discovery message to signify an update to the UI or provide information around new features and onboarding.
Chris Lynch published a new version of this page. Refresh to see the changes.
<div class="bg-white border rounded-md shadow-lg p-4 dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-4 w-4 text-blue-500 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>
<div class="ml-4">
<h3 class="text-gray-800 font-semibold dark:text-white">
New version published
</h3>
<p class="mt-2 text-sm text-gray-700 dark:text-gray-400">
Chris Lynch published a new version of this page. Refresh to see the changes.
</p>
</div>
</div>
</div>