Alerts - Tempalte.Vault | Tailwind Component Library

Explore responsive, customizable alert components built with Tailwind CSS. Featuring various alert types, color schemes, and icons for notifications, warnings, errors, and success messages, designed to enhance UX.

The alert component is ideal for sharing important messages with users, like success notifications, error warnings, or emphasizing specific content within the regular text and headings on a page. Template.vault also offers dismissible alerts that users can close by clicking a designated icon.

Default alerts

Here are default alert component examples to display feedback messages for your users.

See on Github

Information: Please review the details and resubmit your information.

Critical: Please check for errors and make corrections before proceeding.

Success: Your changes have been saved successfully!

Caution: Please double-check the information before continuing.

Notice: Adjust your settings and try again if needed.

HTML


<div class="p-4 mb-4 text-sm text-indigo-900 rounded-lg bg-indigo-100 dark:bg-[#212121] dark:text-indigo-400" role="alert">
  <span class="font-medium">Information:</span> Please review the details and resubmit your information.
</div>
<div class="p-4 mb-4 text-sm text-rose-900 rounded-lg bg-rose-100 dark:bg-[#212121] dark:text-rose-400" role="alert">
  <span class="font-medium">Critical:</span> Please check for errors and make corrections before proceeding.
</div>
<div class="p-4 mb-4 text-sm text-teal-900 rounded-lg bg-teal-100 dark:bg-[#212121] dark:text-teal-400" role="alert">
  <span class="font-medium">Success:</span> Your changes have been saved successfully!
</div>
<div class="p-4 mb-4 text-sm text-amber-900 rounded-lg bg-amber-100 dark:bg-[#212121] dark:text-amber-300" role="alert">
  <span class="font-medium">Caution:</span> Please double-check the information before continuing.
</div>
<div class="p-4 text-sm text-gray-900 rounded-lg bg-gray-200 dark:bg-gray-900 dark:text-gray-400" role="alert">
  <span class="font-medium">Notice:</span> Adjust your settings and try again if needed.
</div>

Alert with list

Use alerts with lists to display multiple points in a single notification, making complex messages clear and organized.

See on Github

Please follow these guidelines:

Enter between 10 and 100 characters
Include at least one uppercase character
Add a unique symbol, e.g., # $ % *

Important requirements:

Minimum of 8 characters
At least one numerical digit
Use a non-alphanumeric character, e.g., & ! ^

Criteria met!

All character requirements fulfilled
Password is secure
You may now proceed

Review checklist:

Ensure form is complete
Confirm details are accurate
Click submit to proceed

HTML


<div class="flex p-4 mb-4 text-sm text-indigo-900 rounded-lg bg-indigo-100 dark:bg-gray-900 dark:text-indigo-400" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3 mt-[2px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Information</span>
  <div >
    <span class="font-medium">Please follow these guidelines:</span>
    <ul class="mt-1.5 list-disc list-inside">
      <li >Enter between 10 and 100 characters</li>
      <li >Include at least one uppercase character</li>
      <li >Add a unique symbol, e.g., # $ % *</li>
    </ul>
  </div>
</div>
<div class="flex p-4 mb-4 text-sm text-rose-900 rounded-lg bg-rose-100 dark:bg-gray-900 dark:text-rose-400" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3 mt-[2px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Warning</span>
  <div >
    <span class="font-medium">Important requirements:</span>
    <ul class="mt-1.5 list-disc list-inside">
      <li >Minimum of 8 characters</li>
      <li >At least one numerical digit</li>
      <li >Use a non-alphanumeric character, e.g., & ! ^</li>
    </ul>
  </div>
</div>
<div class="flex p-4 mb-4 text-sm text-green-900 rounded-lg bg-green-100 dark:bg-gray-900 dark:text-green-400" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3 mt-[2px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Success</span>
  <div >
    <span class="font-medium">Criteria met!</span>
    <ul class="mt-1.5 list-disc list-inside">
      <li >All character requirements fulfilled</li>
      <li >Password is secure</li>
      <li >You may now proceed</li>
    </ul>
  </div>
</div>
<div class="flex p-4 mb-4 text-sm text-orange-900 rounded-lg bg-orange-100 dark:bg-gray-900 dark:text-orange-400" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3 mt-[2px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Reminder</span>
  <div >
    <span class="font-medium">Review checklist:</span>
    <ul class="mt-1.5 list-disc list-inside">
      <li >Ensure form is complete</li>
      <li >Confirm details are accurate</li>
      <li >Click submit to proceed</li>
    </ul>
  </div>
</div>

Bordered alerts

Bordered Alerts provide a clean, structured way to highlight important messages, using distinct borders to separate notifications from surrounding content effectively.

See on Github

Heads up! Check the guidelines and try once more.

Urgent alert! Please address the highlighted issues.

Success! Your changes have been saved successfully.

Caution! Please review the recent warnings.

Notice! Please take note of this update.

HTML


  <div class="flex items-center p-4 mb-4 text-sm text-indigo-800 border border-indigo-300 rounded-lg bg-indigo-50 dark:bg-[#212121] dark:text-indigo-400 dark:border-indigo-800" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Info</span>
  <div >
    <span class="font-medium">Heads up!</span> Check the guidelines and try once more.
  </div>
</div>
<div class="flex items-center p-4 mb-4 text-sm text-purple-800 border border-purple-300 rounded-lg bg-purple-50 dark:bg-[#212121] dark:text-purple-400 dark:border-purple-800" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Info</span>
  <div >
    <span class="font-medium">Urgent alert!</span> Please address the highlighted issues.
  </div>
</div>
<div class="flex items-center p-4 mb-4 text-sm text-green-900 border border-green-400 rounded-lg bg-green-50 dark:bg-[#212121] dark:text-green-500 dark:border-green-800" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Info</span>
  <div >
    <span class="font-medium">Success!</span> Your changes have been saved successfully.
  </div>
</div>
<div class="flex items-center p-4 mb-4 text-sm text-yellow-900 border border-yellow-400 rounded-lg bg-yellow-50 dark:bg-[#212121] dark:text-yellow-400 dark:border-yellow-700" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Info</span>
  <div >
    <span class="font-medium">Caution!</span> Please review the recent warnings.
  </div>
</div>
<div class="flex items-center p-4 text-sm text-gray-700 border border-gray-300 rounded-lg bg-gray-50 dark:bg-[#212121] dark:text-gray-400 dark:border-gray-700" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Info</span>
  <div >
    <span class="font-medium">Notice!</span> Please take note of this update.
  </div>
</div>

Alert with icons

Alert with icons provides clear feedback through messages and icons, improving user experience with visual cues for success, error, or warnings.

See on Github

Action Required! Please update your settings to avoid disruption.

Critical Error! Your session has expired, please log in again.

Success! Your settings have been saved successfully.

Please Review! Your changes have not been finalized.

Note! You have unfinished tasks to complete.

HTML


<div class="flex items-center p-4 mb-4 text-sm text-teal-800 rounded-lg bg-teal-50 dark:bg-[#212121] dark:text-teal-400" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Info</span>
  <div >
    <span class="font-medium">Action Required!</span> Please update your settings to avoid disruption.
  </div>
</div>
<div class="flex items-center p-4 mb-4 text-sm text-orange-800 rounded-lg bg-orange-50 dark:bg-[#212121] dark:text-orange-400" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Danger</span>
  <div >
    <span class="font-medium">Critical Error!</span> Your session has expired, please log in again.
  </div>
</div>
<div class="flex items-center p-4 mb-4 text-sm text-indigo-800 rounded-lg bg-indigo-50 dark:bg-[#212121] dark:text-indigo-400" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Info</span>
  <div >
    <span class="font-medium">Success!</span> Your settings have been saved successfully.
  </div>
</div>
<div class="flex items-center p-4 mb-4 text-sm text-purple-800 rounded-lg bg-purple-50 dark:bg-[#212121] dark:text-purple-400" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Warning</span>
  <div >
    <span class="font-medium">Please Review!</span> Your changes have not been finalized.
  </div>
</div>
<div class="flex items-center p-4 text-sm text-gray-800 rounded-lg bg-gray-50 dark:bg-[#212121] dark:text-gray-300" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Info</span>
  <div >
    <span class="font-medium">Note!</span> You have unfinished tasks to complete.
  </div>
</div>

Dismissible alert

A dismissible alert allows users to close or hide the notification, offering a more interactive and user-friendly experience.

See on Github

A simple info alert with an example link. Check it out.

A simple warning alert with an example link. Act fast.

A simple success alert with an example link. Great job!

A simple warning alert with an example link. Stay alert!

A simple neutral alert with an example link. Check it out.

HTML


<div id="alert-1" class="flex items-center p-4 mb-4 text-purple-800 rounded-lg bg-purple-50 dark:bg-[#212121] dark:text-purple-400" role="alert">
  <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Info</span>
  <div class="ms-3 text-sm font-medium">
    A simple info alert with an <a href="#" class="font-semibold underline hover:no-underline">example link</a>. Check it out.
  </div>
    <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-purple-50 text-purple-500 rounded-lg focus:ring-2 focus:ring-purple-400 p-1.5 hover:bg-purple-200 inline-flex items-center justify-center h-8 w-8 dark:bg-[#212121] dark:text-purple-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-1" aria-label="Close">
      <span class="sr-only">Close</span>
      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
      </svg>
  </button>
</div>
<div id="alert-2" class="flex items-center p-4 mb-4 text-orange-800 rounded-lg bg-orange-50 dark:bg-[#212121] dark:text-orange-400" role="alert">
  <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Warning</span>
  <div class="ms-3 text-sm font-medium">
    A simple warning alert with an <a href="#" class="font-semibold underline hover:no-underline">example link</a>. Act fast.
  </div>
  <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-orange-50 text-orange-500 rounded-lg focus:ring-2 focus:ring-orange-400 p-1.5 hover:bg-orange-200 inline-flex items-center justify-center h-8 w-8 dark:bg-[#212121] dark:text-orange-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-2" aria-label="Close">
    <span class="sr-only">Close</span>
    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
      <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
    </svg>
  </button>
</div>
<div id="alert-3" class="flex items-center p-4 mb-4 text-teal-800 rounded-lg bg-teal-50 dark:bg-[#212121] dark:text-teal-400" role="alert">
  <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Success</span>
  <div class="ms-3 text-sm font-medium">
    A simple success alert with an <a href="#" class="font-semibold underline hover:no-underline">example link</a>. Great job!
  </div>
  <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-teal-50 text-teal-500 rounded-lg focus:ring-2 focus:ring-teal-400 p-1.5 hover:bg-teal-200 inline-flex items-center justify-center h-8 w-8 dark:bg-[#212121] dark:text-teal-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-3" aria-label="Close">
    <span class="sr-only">Close</span>
    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
      <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
    </svg>
  </button>
</div>
<div id="alert-4" class="flex items-center p-4 mb-4 text-indigo-800 rounded-lg bg-indigo-50 dark:bg-[#212121] dark:text-indigo-300" role="alert">
  <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Warning</span>
  <div class="ms-3 text-sm font-medium">
    A simple warning alert with an <a href="#" class="font-semibold underline hover:no-underline">example link</a>. Stay alert!
  </div>
  <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-indigo-50 text-indigo-500 rounded-lg focus:ring-2 focus:ring-indigo-400 p-1.5 hover:bg-indigo-200 inline-flex items-center justify-center h-8 w-8 dark:bg-[#212121] dark:text-indigo-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-4" aria-label="Close">
    <span class="sr-only">Close</span>
    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
      <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
    </svg>
  </button>
</div>
<div id="alert-5" class="flex items-center p-4 rounded-lg bg-gray-50 dark:bg-[#212121]" role="alert">
  <svg class="flex-shrink-0 w-4 h-4 dark:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Info</span>
  <div class="ms-3 text-sm font-medium text-gray-800 dark:text-gray-300">
    A simple neutral alert with an <a href="#" class="font-semibold underline hover:no-underline">example link</a>. Check it out.
  </div>
  <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-gray-50 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex items-center justify-center h-8 w-8 dark:bg-[#212121] dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white" data-dismiss-target="#alert-5" aria-label="Close">
    <span class="sr-only">Dismiss</span>
    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
      <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
    </svg>
  </button>
</div>

Alert with link

An alert with a link displays a notification with clickable text, guiding users to additional information or actions, enhancing user interaction with concise, colorful messages.

See on Github

A simple info alert with an example link. Check it out.

A simple warning alert with an example link. Act fast.

A simple success alert with an example link. Great job!

A simple warning alert with an example link. Stay alert!

A simple neutral alert with an example link. Check it out.

HTML


<div id="alert-1" class="flex items-center p-4 mb-4 text-purple-800 rounded-lg bg-purple-50 dark:bg-[#212121] dark:text-purple-400" role="alert">
  <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Info</span>
  <div class="ms-3 text-sm font-medium">
    A simple info alert with an <a href="#" class="font-semibold underline hover:no-underline">example link</a>. Check it out.
  </div>    
</div>
<div id="alert-2" class="flex items-center p-4 mb-4 text-orange-800 rounded-lg bg-orange-50 dark:bg-[#212121] dark:text-orange-400" role="alert">
  <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Warning</span>
  <div class="ms-3 text-sm font-medium">
    A simple warning alert with an <a href="#" class="font-semibold underline hover:no-underline">example link</a>. Act fast.
  </div>  
  
</div>
<div id="alert-3" class="flex items-center p-4 mb-4 text-teal-800 rounded-lg bg-teal-50 dark:bg-[#212121] dark:text-teal-400" role="alert">
  <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Success</span>
  <div class="ms-3 text-sm font-medium">
    A simple success alert with an <a href="#" class="font-semibold underline hover:no-underline">example link</a>. Great job!
  </div>  
</div>
<div id="alert-4" class="flex items-center p-4 mb-4 text-indigo-800 rounded-lg bg-indigo-50 dark:bg-[#212121] dark:text-indigo-300" role="alert">
  <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Warning</span>
  <div class="ms-3 text-sm font-medium">
    A simple warning alert with an <a href="#" class="font-semibold underline hover:no-underline">example link</a>. Stay alert!
  </div>
</div>
<div id="alert-5" class="flex items-center p-4 rounded-lg bg-gray-50 dark:bg-[#212121]" role="alert">
  <svg class="flex-shrink-0 w-4 h-4 dark:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  </svg>
  <span class="sr-only">Info</span>
  <div class="ms-3 text-sm font-medium text-gray-800 dark:text-gray-300">
    A simple neutral alert with an <a href="#" class="font-semibold underline hover:no-underline">example link</a>. Check it out.
  </div>  
</div>

Components

alerts - Template.Vault

Default alerts

Alert with list

Bordered alerts

Alert with icons

Dismissible alert

Alert with link