Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Examples
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one
of the eight required contextual classes (e.g., .alert-success). For inline
dismissal, use the alerts JavaScript plugin.
A simple primary alert
A simple secondary alert
A simple success alert
A simple danger alert
A simple warning alert
A simple info alert
A simple light alert
A simple dark alert
<div class="relative flex justify-between p-4 mb-4 text-white bg-blue-500 border-0 rounded">
<span>A simple primary alert with
<a class="font-bold text-gray-400">an example link</a>
. Give it a click if you like.
</span>
<button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
<svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'>
<path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
</svg>
</button>
</div>
<div class="mt-4">
<div class="relative flex justify-between p-4 mb-4 text-white bg-blue-100 border-2 border-blue-500 rounded">
<span class="text-blue-500">A simple primary alert with
<a class="font-bold text-blue-800">an example link.</a>
Give it a click if you like.
</span>
<button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
<svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'>
<path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
</svg>
</button>
</div>
</div>
<div class="mt-4">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="#12703a" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
</symbol>
<symbol id="info-fill" fill="blue" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
</symbol>
<symbol id="exclamation-triangle-fill" fill="#a94a13" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
</symbol>
<symbol id="exclamation-triangle-fill1" fill="#862317" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
</symbol>
</svg>
<div class="relative flex justify-start p-4 mb-4 text-blue-600 bg-blue-100 border-2 border-blue-500 rounded">
<svg class="flex-shrink-0 mr-2" width="24" height="24">
<use xlink:href="#info-fill"></use>
</svg>
<div>An example alert with an icon</div>
</div>
<div
class="relative flex justify-start p-4 mb-4 text-green-600 bg-green-100 border-2 border-green-500 rounded">
<svg class="flex-shrink-0 mr-2" width="24" height="24">
<use xlink:href="#check-circle-fill"></use>
</svg>
<div>An example success alert with an icon</div>
</div>
<div
class="relative flex justify-start p-4 mb-4 text-orange-600 bg-orange-100 border-2 border-orange-500 rounded">
<svg class="flex-shrink-0 mr-2" width="24" height="24">
<use xlink:href="#exclamation-triangle-fill"></use>
</svg>
<div>An example warning alert with an icon</div>
</div>
<div
class="relative flex justify-start p-4 mb-4 text-red-600 bg-red-100 border-2 border-red-500 rounded">
<svg class="flex-shrink-0 mr-2" width="24" height="24">
<use xlink:href="#exclamation-triangle-fill1"></use>
</svg>
<div>An example danger alert with an icon</div>
</div>
</div>
<div class="mt-4 ">
<div
class="relative flex justify-between p-4 mb-4 text-green-600 bg-green-100 border-l-4 border-green-500 rounded ">
<span> This is a success alert—check it out!</span>
<button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none"
onclick="closeAlert(event)">
<svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
<path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
</svg>
</button>
</div>
<div class="relative flex justify-between p-4 mb-4 border-t-4 rounded text-cyan-600 bg-cyan-100 border-cyan-500">
<span> This is a info alert—check it out!</span>
<button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
<svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
<path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
</svg>
</button>
</div>
<div class="relative flex justify-between p-4 mb-4 text-orange-600 bg-orange-100 border-r-4 border-orange-500 rounded">
<span> This is a warning alert—check it out!</span>
<button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
<svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
<path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
</svg>
</button>
</div>
<div class="relative flex justify-between p-4 mb-4 text-red-600 bg-red-100 border-b-4 border-red-500 rounded">
<span> This is a danger alert—check it out!</span>
<button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
<svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
<path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
</svg>
</button>
</div>
</div>
<div class="mt-4">
<div class="relative flex justify-between p-4 mb-4 text-orange-600 bg-orange-100 border-2 border-orange-500">
<span> This is a warning alert—check it out!</span>
<button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
<svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'>
<path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
</svg>
</button>
</div>
<div class="relative flex justify-between p-4 mb-4 text-white bg-orange-500 ">
<span> This is a warning alert—check it out!</span>
<button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none" onclick="closeAlert(event)">
<svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
<path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
</svg>
</button>
</div>
</div>
<div class="mt-4">
<div class="relative p-4 mb-4 text-green-600 bg-green-100 border-2 border-green-500 rounded">
<h5 class="text-xl font-medium">Well done!</h5>
<p class="mb-4">Aww yeah, you successfully read this important alert message. This example text is
going to run a bit longer so that you can see how spacing within an alert works with this kind of
content.</p>
<hr class="mb-4 text-green-500 border-green-500">
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</div>
</div>