Components : Confirmation Modal

Preview content adapted to proportion

Confirmation Modal

Modal

Used to confirm critical actions where the user needs to be reminded of the consequences, such as deleting data or leaving a page.

This component displays a modal dialog that requires user confirmation before proceeding with an action. It includes a blur effect for the background and a centered content area with a title, message, and action buttons.

Interaction:

The modal can be dismissed by clicking the close button (×) or by interacting with the Confirm or Cancel buttons. The background can also be clicked to close the modal in some implementations.

Responsive:

The modal is designed to be responsive, with a maximum width of 28rem (md:w-[28rem]) on larger screens and a full-width layout on smaller screens. It uses flexbox for alignment and transition effects for smooth animations.

Date : June 19, 2025

Copys : 0

fa-tags

User confirmation Data deletion confirmation Page exit confirmation Form submission confirmation

Code

<div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 transition-opacity">
 <div class="relative bg-gray-900/80 backdrop-blur-xl rounded-2xl border border-gray-800 shadow-2xl w-full max-w-lg transform transition-all duration-300 scale-95 hover:scale-100 md:w-[28rem]">
  <div class="p-6 space-y-4">
   <div class="flex justify-between items-center">
    <h3 class="text-xl font-semibold text-cyan-400">
     Confirmation Required
    </h3>
    <button class="p-2 rounded-full hover:bg-gray-800 transition-colors">
     <span class="text-2xl">
      ×
     </span>
    </button>
   </div>
   <div class="space-y-2 text-gray-300">
    <p>
     Are you sure you want to perform this action? This operation cannot be undone.
    </p>
   </div>
   <div class="flex gap-3 pt-4">
    <button class="px-5 py-2.5 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-medium transition-all transform hover:scale-[1.02]">
     Confirm
    </button>
    <button class="px-5 py-2.5 rounded-lg border border-gray-700 hover:border-cyan-500/50 text-gray-300 hover:text-cyan-400 transition-colors">
     Cancel
    </button>
   </div>
  </div>
  <div class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center">
   <div class="animate-spin">
    🌀
   </div>
  </div>
  <div class="h-1.5 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-b-2xl opacity-80">
  </div>
 </div>
</div>

<template>
 <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 transition-opacity">
  <div class="relative bg-gray-900/80 backdrop-blur-xl rounded-2xl border border-gray-800 shadow-2xl w-full max-w-lg transform transition-all duration-300 scale-95 hover:scale-100 md:w-[28rem]">
   <div class="p-6 space-y-4">
    <div class="flex justify-between items-center">
     <h3 class="text-xl font-semibold text-cyan-400">
      Confirmation Required
     </h3>
     <button class="p-2 rounded-full hover:bg-gray-800 transition-colors">
      <span class="text-2xl">
       ×
      </span>
     </button>
    </div>
    <div class="space-y-2 text-gray-300">
     <p>
      Are you sure you want to perform this action? This operation cannot be undone.
     </p>
    </div>
    <div class="flex gap-3 pt-4">
     <button class="px-5 py-2.5 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-medium transition-all transform hover:scale-[1.02]">
      Confirm
     </button>
     <button class="px-5 py-2.5 rounded-lg border border-gray-700 hover:border-cyan-500/50 text-gray-300 hover:text-cyan-400 transition-colors">
      Cancel
     </button>
    </div>
   </div>
   <div class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center">
    <div class="animate-spin">
     🌀
    </div>
   </div>
   <div class="h-1.5 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-b-2xl opacity-80">
   </div>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'MyModalComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>


import React from "react";
const MyModalComponent = () => {
    return (
<div>
<div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 transition-opacity">
 <div class="relative bg-gray-900/80 backdrop-blur-xl rounded-2xl border border-gray-800 shadow-2xl w-full max-w-lg transform transition-all duration-300 scale-95 hover:scale-100 md:w-[28rem]">
  <div class="p-6 space-y-4">
   <div class="flex justify-between items-center">
    <h3 class="text-xl font-semibold text-cyan-400">
     Confirmation Required
    </h3>
    <button class="p-2 rounded-full hover:bg-gray-800 transition-colors">
     <span class="text-2xl">
      ×
     </span>
    </button>
   </div>
   <div class="space-y-2 text-gray-300">
    <p>
     Are you sure you want to perform this action? This operation cannot be undone.
    </p>
   </div>
   <div class="flex gap-3 pt-4">
    <button class="px-5 py-2.5 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-medium transition-all transform hover:scale-[1.02]">
     Confirm
    </button>
    <button class="px-5 py-2.5 rounded-lg border border-gray-700 hover:border-cyan-500/50 text-gray-300 hover:text-cyan-400 transition-colors">
     Cancel
    </button>
   </div>
  </div>
  <div class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center">
   <div class="animate-spin">
    🌀
   </div>
  </div>
  <div class="h-1.5 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-b-2xl opacity-80">
  </div>
 </div>
</div>

</div>
    )
}
export default MyModalComponent;

Recommended Related Components

More+

Floating Action Button with Modal Confirmation

This component is used to prompt users for confirmation before performing a critical action, such as deleting data or submitting a form.

Modal Dialog Box

Used to present important information, collect user input, or confirm actions in a user interface.

Confirmation Modal

Used to confirm critical actions where the user needs to be reminded of the consequences, such as deleting data or leaving a page.