Vibedex.io
Back to gallery
modalsIntermediateanimation

Confirmation Modal

A small confirmation dialog with destructive action emphasis.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a destructive-action confirmation modal with Tailwind <dialog>: warning icon at the top, headline 'Delete this item?', a one-line body, and two buttons — outline Cancel and a solid red Delete. Smaller than a full content modal — max-w-sm. Used for irreversible actions.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/modals/3.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-modal-confirm
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class=" w-full">
<div
      class="fixed inset-0 z-50 grid place-content-center bg-black/50 p-4"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modalTitle"
    >
      <div class="w-full max-w-md rounded-lg bg-white p-6 shadow-lg">
        <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Title</h2>

        <div class="mt-4">
          <p class="text-pretty text-gray-700">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
            consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>

        <footer class="mt-6 flex justify-end gap-2">
          <button
            type="button"
            class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200"
          >
            Cancel
          </button>

          <button
            type="button"
            class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
          >
            Done
          </button>
        </footer>
      </div>
    </div>
  </div>
</div>