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-primary-900 rthajskldmn rounded-lg mb-4">
This is a primary alert—check it out!
</div>
<div class="relative bg-red-100 text-red-900 rthajskldmn rounded-lg mb-4">
This is a danger alert—check it out!
</div>
<div class="relative bg-yellow-100 text-yellow-900 rthajskldmn rounded-lg mb-4">
This is a warning alert—check it out!
</div>
<div class="relative bg-green-100 text-green-900 rthajskldmn rounded-lg mb-4">
This is a success alert—check it out!
</div>
<div class="relative bg-primary-200 text-gray-900 rthajskldmn rounded-lg mb-4">
This is a info alert—check it out!
</div>
<div class="relative bg-gray-50 text-gray-900 rthajskldmn rounded-lg mb-4">
This is a light alert—check it out!
</div>
<div class="relative bg-gray-500 text-gray-100 rthajskldmn rounded-lg 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="{ show: true }" x-show="show" class="flex qesolakmsjd pdskdmsdnjw relative bg-gray-200 text-primary-900 rthajskldmn rounded-lg 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="show = false">
<span class="text-2xl">×</span>
</button>
</div>
<div x-data="{ show: true }" x-show="show" class="flex qesolakmsjd pdskdmsdnjw relative bg-red-100 text-red-900 rthajskldmn rounded-lg 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="show = false">
<span class="text-2xl">×</span>
</button>
</div>
<div x-data="{ show: true }" x-show="show" class="flex qesolakmsjd pdskdmsdnjw relative bg-yellow-100 text-yellow-900 rthajskldmn rounded-lg 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="show = false">
<span class="text-2xl">×</span>
</button>
</div>
<div x-data="{ show: true }" x-show="show" class="flex qesolakmsjd pdskdmsdnjw relative bg-green-100 text-green-900 rthajskldmn rounded-lg 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="show = false">
<span class="text-2xl">×</span>
</button>
</div>
<div x-data="{ show: true }" x-show="show" class="flex qesolakmsjd pdskdmsdnjw relative bg-primary-200 text-gray-900 rthajskldmn rounded-lg 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="show = false">
<span class="text-2xl">×</span>
</button>
</div>
<div x-data="{ show: true }" x-show="show" class="flex qesolakmsjd pdskdmsdnjw relative bg-gray-50 text-gray-900 rthajskldmn rounded-lg 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="show = false">
<span class="text-2xl">×</span>
</button>
</div>
<div x-data="{ show: true }" x-show="show" class="flex qesolakmsjd pdskdmsdnjw relative bg-gray-500 text-gray-100 rthajskldmn rounded-lg 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="show = false">
<span class="text-2xl">×</span>
</button>
</div>