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-indigo-100 text-indigo-900 dark:bg-indigo-800/30 dark:text-indigo-400 py-3 dkslaoeyhnmj rounded-sm mb-4">
This is a primary alert—check it out!
</div>
<div class="relative bg-red-100 text-red-900 dark:bg-red-800/30 dark:text-red-400 py-3 dkslaoeyhnmj rounded-sm mb-4">
This is a danger alert—check it out!
</div>
<div class="relative bg-yellow-100 text-yellow-900 dark:bg-yellow-800/30 dark:text-yellow-400 py-3 dkslaoeyhnmj rounded-sm mb-4">
This is a warning alert—check it out!
</div>
<div class="relative bg-green-100 text-green-900 dark:bg-green-800/30 dark:text-green-400 py-3 dkslaoeyhnmj rounded-sm mb-4">
This is a success alert—check it out!
</div>
<div class="relative bg-sky-100 text-sky-900 dark:bg-sky-800/30 dark:text-sky-400 py-3 dkslaoeyhnmj rounded-sm mb-4">
This is a info alert—check it out!
</div>
<div class="relative bg-gray-50 text-gray-900 dark:bg-gray-900/90 dark:text-gray-400 py-3 dkslaoeyhnmj rounded-sm mb-4">
This is a light alert—check it out!
</div>
<div class="relative bg-gray-500 text-gray-100 dark:bg-gray-200 dark:text-gray-700 py-3 dkslaoeyhnmj rounded-sm 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 vlaoethsnkma layhetgsjdcb relative bg-indigo-100 text-indigo-900 dark:bg-indigo-800/30 dark:text-indigo-400 py-3 dkslaoeyhnmj rounded-sm 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 vlaoethsnkma layhetgsjdcb relative bg-red-100 text-red-900 dark:bg-red-800/30 dark:text-red-400 py-3 dkslaoeyhnmj rounded-sm 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 vlaoethsnkma layhetgsjdcb relative bg-yellow-100 text-yellow-900 dark:bg-yellow-800/30 dark:text-yellow-400 py-3 dkslaoeyhnmj rounded-sm 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 vlaoethsnkma layhetgsjdcb relative bg-green-100 text-green-900 dark:bg-green-800/30 dark:text-green-400 py-3 dkslaoeyhnmj rounded-sm 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 vlaoethsnkma layhetgsjdcb relative bg-sky-100 text-sky-900 dark:bg-sky-800/30 dark:text-sky-400 py-3 dkslaoeyhnmj rounded-sm 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 vlaoethsnkma layhetgsjdcb relative bg-gray-50 text-gray-900 dark:bg-gray-900/90 dark:text-gray-400 py-3 dkslaoeyhnmj rounded-sm 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 vlaoethsnkma layhetgsjdcb relative bg-gray-500 text-gray-100 dark:bg-gray-200 dark:text-gray-700 py-3 dkslaoeyhnmj rounded-sm 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>