# Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

## Basic Alert

info

This is a danger alert—check it out!

info

This is a warning alert—check it out!

info

This is a success alert—check it out!

info

This is a info alert—check it out!

## Dismiss Alert with Link

Dismiss Warning! You should check in on some of those fields below.

## Alert with action button

### Warning

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

    <!-- Basic Alert -->
    <div class="flex flex-col gap-4">
      <div class="flex items-center gap-2 relative bg-red-50 text-red-700 p-4 rounded">
        <i class="material-symbols-outlined">info</i>
        <p>This is a danger alert—check it out!</p>
      </div>
      <div class="flex items-center gap-2 relative bg-yellow-50 text-yellow-700 p-4 rounded">
        <i class="material-symbols-outlined">info</i>
        <p>This is a warning alert—check it out!</p>
      </div>
      <div class="flex items-center gap-2 relative bg-green-50 text-green-700 p-4 rounded">
        <i class="material-symbols-outlined">info</i>
        <p>This is a success alert—check it out!</p>
      </div>
      <div class="flex items-center gap-2 relative bg-cyan-50 text-slate-700 p-4 rounded">
        <i class="material-symbols-outlined">info</i>
        <p>This is a info alert—check it out!</p>
      </div>
    </div>

    <!-- Dismiss Alert with Link -->
    <div id="alert_a" class="show [&.show]:flex hidden justify-between items-center relative bg-yellow-50 text-yellow-700 p-4 rounded">
      <div>
        <a href="#" class="hover:underline font-bold">Dismiss Warning!</a> You should check in on some of those fields below.
      </div>
      <button type="button" data-close="#alert_a">
        <span class="text-2xl">×</span>
      </button>
    </div>

    <!-- Alert with action button -->
    <div id="alert_b" class="show [&.show]:flex hidden justify-between items-center relative bg-red-50 text-red-700 px-6 py-8 rounded">
      <div>
        <div class="flex flex-row justify-between">
          <h3 class="text-title-lg font-bold mb-2">Warning</h3>

          <button type="button" data-close="#alert_b">
            <span class="text-2xl">×</span>
          </button>
        </div>
        <p class="mb-6 mr-6 text-body-lg">Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>

        <button class="btn relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-8 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium bg-error-600 text-white dark:bg-error-200 dark:text-error-800">
          Try Now!
        </button>
      </div>
    </div>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts