Tailwind CSS Alerts
Show contextual information to your users using alert elements based on Tailwind CSS
The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.
Default alert
Use the following examples of alert components to show messages as feedback to your users.
Primary alert! Change a
few things up and try submitting again.
Secondary alert! Change
a few things up and try submitting again.
Info alert! Change a
few things up and try submitting again.
Success alert! Change a
few things up and try submitting again.
Danger alert! Change a
few things up and try submitting again.
Warning alert! Change a
few things up and try submitting again.
Dark alert! Change a
few things up and try submitting again.
<div class="p-4 mb-4 text-sm text-white bg-gradient-to-br from-pink-500 to-voilet-500 rounded-lg" role="alert">
<span class="font-medium">Primary alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 mb-4 text-sm text-white bg-gradient-to-br from-slate-300 to-slate-600 rounded-lg" role="alert">
<span class="font-medium">Secondary alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 mb-4 text-sm text-white bg-gradient-to-br from-cyan-500 to-blue-500 rounded-lg" role="alert">
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 mb-4 text-sm text-white bg-gradient-to-br from-green-400 to-green-700 rounded-lg" role="alert">
<span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 mb-4 text-sm text-white bg-gradient-to-br from-red-200 to-red-500 rounded-lg" role="alert">
<span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 mb-4 text-sm text-white bg-gradient-to-br from-yellow-500 to-orange-500 rounded-lg" role="alert">
<span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 mb-4 text-sm text-white bg-gradient-to-br from-dark-700 to-dark-900 rounded-lg" role="alert">
<span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.
</div>Alerts with icon
You can also include a descriptive icon to complement the message inside the alert component with the following example.
Primary alert! Change
a few things up and try submitting again.
Seconary alert!
Change a few things up and try submitting again.
Info alert! Change a
few things up and try submitting again.
Success alert! Change
a few things up and try submitting again.
Danger alert! Change
a few things up and try submitting again.
Warning alert! Change
a few things up and try submitting again.
Dark alert! Change a
few things up and try submitting again.
<div class="flex p-4 mb-4 text-white bg-gradient-to-br from-pink-500 to-voilet-500 rounded-lg" role="alert">
<svg class="inline flex-shrink-0 mr-3 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div>
<span class="font-medium">Primary alert!</span> Change a few things up and try submitting again.
</div>
</div>
<div class="flex p-4 mb-4 text-white bg-gradient-to-br from-slate-300 to-slate-600 rounded-lg" role="alert">
<svg class="inline flex-shrink-0 mr-3 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div>
<span class="font-medium">Seconary alert!</span> Change a few things up and try submitting again.
</div>
</div>
<div class="flex p-4 mb-4 text-white bg-gradient-to-br from-cyan-500 to-blue-500 rounded-lg" role="alert">
<svg class="inline flex-shrink-0 mr-3 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div>
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</div>
</div>
<div class="flex p-4 mb-4 text-white bg-gradient-to-br from-green-400 to-green-700 rounded-lg" role="alert">
<svg class="inline flex-shrink-0 mr-3 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div>
<span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
</div>
</div>
<div class="flex p-4 mb-4 text-white bg-gradient-to-br from-red-200 to-red-500 rounded-lg" role="alert">
<svg class="inline flex-shrink-0 mr-3 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div>
<span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
</div>
</div>
<div class="flex p-4 mb-4 text-white bg-gradient-to-br from-yellow-500 to-orange-500 rounded-lg" role="alert">
<svg class="inline flex-shrink-0 mr-3 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div>
<span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
</div>
</div>
<div class="flex p-4 mb-4 text-white bg-gradient-to-br from-dark-700 to-dark-900 rounded-lg" role="alert">
<svg class="inline flex-shrink-0 mr-3 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div>
<span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.
</div>
</div>Dismissing
Use the following alert elements that are also dismissable.
A simple primary alert with an
example link. Give it a click if you like.
A simple secondary alert with an
example link. Give it a click if you like.
A simple info alert with an
example link. Give it a click if you like.
A simple success alert with an
example link. Give it a click if you like.
A simple danger alert with an
example link. Give it a click if you like.
A simple warning alert with an
example link. Give it a click if you like.
A simple dark alert with an
example link. Give it a click if you like.
<div id="alert-1" class="flex p-4 mb-4 rounded-lg bg-gradient-to-br from-pink-500 to-voilet-500" role="alert">
<svg class="flex-shrink-0 w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div class="ml-3 text-sm font-medium text-white">
A simple primary alert with an <a href="#" class="font-semibold underline hover:text-white">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 p-1.5 inline-flex h-8 w-8 text-white" data-dismiss-target="#alert-5" aria-label="Close">
<span class="sr-only">Dismiss</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div id="alert-2" class="flex p-4 mb-4 rounded-lg bg-gradient-to-br from-slate-300 to-slate-600" role="alert">
<svg class="flex-shrink-0 w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div class="ml-3 text-sm font-medium text-white">
A simple secondary alert with an <a href="#" class="font-semibold underline hover:text-white">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 p-1.5 inline-flex h-8 w-8 text-white" data-dismiss-target="#alert-5" aria-label="Close">
<span class="sr-only">Dismiss</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div id="alert-3" class="flex p-4 mb-4 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-500" role="alert">
<svg class="flex-shrink-0 w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div class="ml-3 text-sm font-medium text-white">
A simple info alert with an <a href="#" class="font-semibold underline hover:text-white">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 p-1.5 inline-flex h-8 w-8 text-white" data-dismiss-target="#alert-5" aria-label="Close">
<span class="sr-only">Dismiss</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div id="alert-4" class="flex p-4 mb-4 rounded-lg bg-gradient-to-br from-green-400 to-green-700" role="alert">
<svg class="flex-shrink-0 w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div class="ml-3 text-sm font-medium text-white">
A simple success alert with an <a href="#" class="font-semibold underline hover:text-white">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 p-1.5 inline-flex h-8 w-8 text-white" data-dismiss-target="#alert-5" aria-label="Close">
<span class="sr-only">Dismiss</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div id="alert-5" class="flex p-4 mb-4 rounded-lg bg-gradient-to-br from-red-200 to-red-500" role="alert">
<svg class="flex-shrink-0 w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div class="ml-3 text-sm font-medium text-white">
A simple danger alert with an <a href="#" class="font-semibold underline hover:text-white">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 p-1.5 inline-flex h-8 w-8 text-white" data-dismiss-target="#alert-5" aria-label="Close">
<span class="sr-only">Dismiss</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div id="alert-5" class="flex p-4 mb-4 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-500" role="alert">
<svg class="flex-shrink-0 w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div class="ml-3 text-sm font-medium text-white">
A simple warning alert with an <a href="#" class="font-semibold underline hover:text-white">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 p-1.5 inline-flex h-8 w-8 text-white" data-dismiss-target="#alert-5" aria-label="Close">
<span class="sr-only">Dismiss</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div id="alert-5" class="flex p-4 mb-4 rounded-lg bg-gradient-to-br from-dark-700 to-dark-900" role="alert">
<svg class="flex-shrink-0 w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
<div class="ml-3 text-sm font-medium text-white">
A simple dark alert with an <a href="#" class="font-semibold underline hover:text-white">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 p-1.5 inline-flex h-8 w-8 text-white" data-dismiss-target="#alert-5" aria-label="Close">
<span class="sr-only">Dismiss</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>If you want more details about Alert component, please check the official docs on Flowbite.