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-lg 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-lg 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-600 text-sm text-white rounded-lg p-4 dark:bg-blue-500" role="alert">
<span class="font-bold">Info</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-teal-500 text-sm text-white rounded-lg 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-lg 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-yellow-500 text-sm text-white rounded-lg 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-lg 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-100 border border-gray-200 text-sm text-gray-800 rounded-lg p-4 dark:bg-white/10 dark:border-white/20 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-gray-50 border border-gray-200 text-sm text-gray-600 rounded-lg p-4 dark:bg-white/[.05] dark:border-white/10 dark:text-gray-400" role="alert">
<span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-blue-100 border border-blue-200 text-sm text-blue-800 rounded-lg p-4 dark:bg-blue-800/10 dark:border-blue-900 dark:text-blue-500" role="alert">
<span class="font-bold">Info</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-teal-100 border border-teal-200 text-sm text-teal-800 rounded-lg p-4 dark:bg-teal-800/10 dark:border-teal-900 dark:text-teal-500" role="alert">
<span class="font-bold">Success</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-red-100 border border-red-200 text-sm text-red-800 rounded-lg p-4 dark:bg-red-800/10 dark:border-red-900 dark:text-red-500" role="alert">
<span class="font-bold">Danger</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-yellow-100 border border-yellow-200 text-sm text-yellow-800 rounded-lg p-4 dark:bg-yellow-800/10 dark:border-yellow-900 dark:text-yellow-500" role="alert">
<span class="font-bold">Warning</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-white/10 border border-white/10 text-sm text-white rounded-lg p-4" role="alert">
<span class="font-bold">Light</span> alert! You should check in on some of those fields below.
</div>
Use a discovery message to signify an update to the UI or provide information around new features and onboarding.
You have successfully updated your email preferences.
Your purchase has been declined.
<div class="bg-teal-50 border-t-2 border-teal-500 rounded-lg p-4 dark:bg-teal-800/30" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<!-- Icon -->
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full border-4 border-teal-100 bg-teal-200 text-teal-800 dark:border-teal-900 dark:bg-teal-800 dark:text-teal-400">
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
</span>
<!-- End Icon -->
</div>
<div class="ms-3">
<h3 class="text-gray-800 font-semibold dark:text-white">
Successfully updated.
</h3>
<p class="text-sm text-gray-700 dark:text-gray-400">
You have successfully updated your email preferences.
</p>
</div>
</div>
</div>
<div class="bg-red-50 border-s-4 border-red-500 p-4 dark:bg-red-800/30" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<!-- Icon -->
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full border-4 border-red-100 bg-red-200 text-red-800 dark:border-red-900 dark:bg-red-800 dark:text-red-400">
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</span>
<!-- End Icon -->
</div>
<div class="ms-3">
<h3 class="text-gray-800 font-semibold dark:text-white">
Error!
</h3>
<p class="text-sm text-gray-700 dark:text-gray-400">
Your purchase has been declined.
</p>
</div>
</div>
</div>
Alerts can also contain additional HTML elements like headings, paragraphs and icons.
<div class="bg-yellow-50 border border-yellow-200 text-sm text-yellow-800 rounded-lg p-4 dark:bg-yellow-800/10 dark:border-yellow-900 dark:text-yellow-500" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 h-4 w-4 mt-0.5" 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"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
</div>
<div class="ms-4">
<h3 class="text-sm 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 text-sm text-red-800 rounded-lg p-4 dark:bg-red-800/10 dark:border-red-900 dark:text-red-500" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 h-4 w-4 mt-0.5" 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"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
</div>
<div class="ms-4">
<h3 class="text-sm font-semibold">
A problem has been occurred while submitting your data.
</h3>
<div class="mt-2 text-sm text-red-700 dark:text-red-400">
<ul class="list-disc space-y-1 ps-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-100 border border-blue-200 text-gray-800 rounded-lg p-4 dark:bg-blue-800/10 dark:border-blue-900 dark:text-white" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 h-4 w-4 mt-1" 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"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</div>
<div class="ms-3">
<h3 class="font-semibold">
YouTube would like you to send notifications
</h3>
<div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
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 items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:text-blue-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
Don't allow
</button>
<button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:text-blue-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
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 text-sm text-gray-600 rounded-lg p-4 dark:bg-white/[.05] dark:border-white/10 dark:text-gray-400" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 h-4 w-4 mt-0.5" 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"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</div>
<div class="flex-1 md:flex md:justify-between ms-2">
<p class="text-sm">
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:ms-6">
<a class="text-gray-800 hover:text-gray-500 font-medium whitespace-nowrap dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">Details</a>
</p>
</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 border-gray-200 rounded-lg shadow-lg p-4 dark:bg-gray-800 dark:border-gray-700" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 h-4 w-4 text-blue-600 mt-1" 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"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</div>
<div class="ms-3">
<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>
Note that this component requires the use of our Remove Element plugin, else you can skip this message if you are already using Preline UI as a package.
Use dismiss-alert to dismiss a content.
<div id="dismiss-alert" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 bg-teal-50 border border-teal-200 text-sm text-teal-800 rounded-lg p-4 dark:bg-teal-800/10 dark:border-teal-900 dark:text-teal-500" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 h-4 w-4 text-blue-600 mt-1" 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"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
</div>
<div class="ms-2">
<div class="text-sm font-medium">
File has been successfully uploaded.
</div>
</div>
<div class="ps-3 ms-auto">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex bg-teal-50 rounded-lg 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 dark:bg-transparent dark:hover:bg-teal-800/50 dark:text-teal-600" data-hs-remove-element="#dismiss-alert">
<span class="sr-only">Dismiss</span>
<svg class="flex-shrink-0 h-4 w-4" 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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
</div>
</div>
</div>