Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Example
Alerts are available for any length of text, as well as an optional dismiss button.
This is a primary alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a success alert—check it out!
This is a info alert—check it out!
This is a light alert—check it out!
This is a dark alert—check it out!
<div class="relative bg-gray-200 text-blue-900 py-3 px-6 rounded mb-4">
This is a primary alert—check it out!
</div>
<div class="relative bg-red-100 text-red-900 py-3 px-6 rounded mb-4">
This is a danger alert—check it out!
</div>
<div class="relative bg-yellow-100 text-yellow-900 py-3 px-6 rounded mb-4">
This is a warning alert—check it out!
</div>
<div class="relative bg-green-100 text-green-900 py-3 px-6 rounded mb-4">
This is a success alert—check it out!
</div>
<div class="relative bg-blue-200 text-gray-900 py-3 px-6 rounded mb-4">
This is a info alert—check it out!
</div>
<div class="relative bg-gray-50 text-gray-900 py-3 px-6 rounded mb-4">
This is a light alert—check it out!
</div>
<div class="relative bg-gray-500 text-gray-100 py-3 px-6 rounded mb-4">
This is a dark alert—check it out!
</div>
Dismiss Alert
Using the Alpine js, it’s possible to dismiss any alert inline.
Dismiss Primary! You should check in on some of those fields below.
Dismiss Danger! You should check in on some of those fields below.
Dismiss Warning! You should check in on some of those fields below.
Dismiss Success! You should check in on some of those fields below.
Dismiss Info! You should check in on some of those fields below.
Dismiss Light! You should check in on some of those fields below.
Dismiss Dark! You should check in on some of those fields below.
<div x-data="{ open: true }" x-show="open" class="flex justify-between items-center relative bg-gray-200 text-blue-900 py-3 px-6 rounded mb-4">
<div>
<a href="#" class="underline font-bold">Dismiss Primary!</a> You should check in on some of those fields below.
</div>
<button type="button" @click="open = false">
<span class="text-2xl">×</span>
</button>
</div>
<div x-data="{ open: true }" x-show="open" class="flex justify-between items-center relative bg-red-100 text-red-900 py-3 px-6 rounded mb-4">
<div>
<a href="#" class="underline font-bold">Dismiss Danger!</a> You should check in on some of those fields below.
</div>
<button type="button" @click="open = false">
<span class="text-2xl">×</span>
</button>
</div>
<div x-data="{ open: true }" x-show="open" class="flex justify-between items-center relative bg-yellow-100 text-yellow-900 py-3 px-6 rounded mb-4">
<div>
<a href="#" class="underline font-bold">Dismiss Warning!</a> You should check in on some of those fields below.
</div>
<button type="button" @click="open = false">
<span class="text-2xl">×</span>
</button>
</div>
<div x-data="{ open: true }" x-show="open" class="flex justify-between items-center relative bg-green-100 text-green-900 py-3 px-6 rounded mb-4">
<div>
<a href="#" class="underline font-bold">Dismiss Success!</a> You should check in on some of those fields below.
</div>
<button type="button" @click="open = false">
<span class="text-2xl">×</span>
</button>
</div>
<div x-data="{ open: true }" x-show="open" class="flex justify-between items-center relative bg-blue-200 text-gray-900 py-3 px-6 rounded mb-4">
<div>
<a href="#" class="underline font-bold">Dismiss Info!</a> You should check in on some of those fields below.
</div>
<button type="button" @click="open = false">
<span class="text-2xl">×</span>
</button>
</div>
<div x-data="{ open: true }" x-show="open" class="flex justify-between items-center relative bg-gray-50 text-gray-900 py-3 px-6 rounded mb-4">
<div>
<a href="#" class="underline font-bold">Dismiss Light!</a> You should check in on some of those fields below.
</div>
<button type="button" @click="open = false">
<span class="text-2xl">×</span>
</button>
</div>
<div x-data="{ open: true }" x-show="open" class="flex justify-between items-center relative bg-gray-500 text-gray-100 py-3 px-6 rounded mb-4">
<div>
<a href="#" class="underline font-bold">Dismiss Dark!</a> You should check in on some of those fields below.
</div>
<button type="button" @click="open = false">
<span class="text-2xl">×</span>
</button>
</div>