Dismiss

Basic Usage

Dismiss the element with a smooth transition, ensuring it is removed from the DOM.

Attention Required!Please review the details to resolve the issue

<div class="mv-alert" role="alert" aria-labelledby="alert_heading" aria-describedby="alert_message" id="alert">
  <div class="mv-alert-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert size-6 text-destructive" aria-hidden="true">
      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
      <path d="M12 9v4"></path>
      <path d="M12 17h.01"></path>
    </svg>
  </div>
  <div class="mv-alert-title flex items-center gap-1.5" id="alert_heading">
    <span class="font-semibold">Attention Required!</span>Please review the
    details to resolve the issue
  </div>
  <button class="mv-alert-close" data-mv-dismiss="#alert" aria-label="Close alert">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
      <path d="M18 6 6 18"></path>
      <path d="m6 6 12 12"></path>
    </svg>
  </button>
</div>

Hide Mode

Dismiss the element with a smooth transition, ensuring it is hidden with .hidden Tailwind Class.

Attention Required!

Please review the details to resolve the issue

<div class="space-y-2.5">
  <div class="mv-alert" role="alert" aria-labelledby="alert_heading" aria-describedby="alert_message" id="alert">
    <div class="mv-alert-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info text-primary" aria-hidden="true">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M12 16v-4"></path>
        <path d="M12 8h.01"></path>
      </svg>
    </div>
    <div class="mv-alert-content">
      <h2 class="mv-alert-title" id="alert_heading">Attention Required!</h2>
      <p class="mv-alert-description" id="alert_message">
        Please review the details to resolve the issue
      </p>
    </div>
    <div class="mv-alert-tooltip">
      <button class="mv-alert-close" data-mv-dismiss="#alert" data-mv-dismiss-mode="hide" aria-label="Close alert">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
  </div>
  <button type="button" class="mv-btn hidden" id="alert_restore" aria-controls="alert" aria-expanded="false">
    Display back
  </button>
</div>