Modals Component
Danger Modal
Danger
This alert is created to display the relevant more information
<div class="relative bg-white dark:bg-dark-card rounded-lg shadow danger-border-left">
<button type="button" class="flex-center absolute top-3 end-2.5 hover:bg-gray-200 dark:hover:bg-dark-icon rounded-lg size-8 close-button">
<i class="ri-close-line text-gray-500 dark:text-dark-text text-xl"></i>
</button>
<div class="p-4 md:py-7 flex-center flex-col text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
<path d="M23 29C23 29.3978 22.842 29.7794 22.5607 30.0607C22.2794 30.342 21.8978 30.5 21.5 30.5C20.7044 30.5 19.9413 30.1839 19.3787 29.6213C18.8161 29.0587 18.5 28.2956 18.5 27.5V20C18.1022 20 17.7207 19.842 17.4393 19.5607C17.158 19.2794 17 18.8978 17 18.5C17 18.1022 17.158 17.7206 17.4393 17.4393C17.7207 17.158 18.1022 17 18.5 17C19.2957 17 20.0587 17.3161 20.6213 17.8787C21.1839 18.4413 21.5 19.2044 21.5 20V27.5C21.8978 27.5 22.2794 27.658 22.5607 27.9393C22.842 28.2206 23 28.6022 23 29ZM39.5 20C39.5 23.8567 38.3564 27.6269 36.2137 30.8336C34.071 34.0404 31.0255 36.5397 27.4623 38.0156C23.8992 39.4916 19.9784 39.8777 16.1957 39.1253C12.4131 38.3729 8.93855 36.5157 6.21143 33.7886C3.4843 31.0615 1.62711 27.5869 0.874696 23.8043C0.122284 20.0216 0.508449 16.1008 1.98436 12.5377C3.46027 8.97451 5.95963 5.92903 9.16639 3.78634C12.3731 1.64366 16.1433 0.5 20 0.5C25.1701 0.50546 30.1268 2.56167 33.7826 6.21745C37.4383 9.87322 39.4945 14.83 39.5 20ZM36.5 20C36.5 16.7366 35.5323 13.5465 33.7193 10.8331C31.9062 8.11968 29.3293 6.00483 26.3143 4.75599C23.2993 3.50714 19.9817 3.18039 16.781 3.81704C13.5803 4.4537 10.6403 6.02517 8.33275 8.33274C6.02518 10.6403 4.45371 13.5803 3.81705 16.781C3.1804 19.9817 3.50715 23.2993 4.756 26.3143C6.00484 29.3293 8.11969 31.9062 10.8331 33.7192C13.5465 35.5323 16.7366 36.5 20 36.5C24.3746 36.495 28.5685 34.7551 31.6618 31.6618C34.7551 28.5685 36.495 24.3745 36.5 20ZM19.25 14C19.695 14 20.13 13.868 20.5 13.6208C20.8701 13.3736 21.1584 13.0222 21.3287 12.611C21.499 12.1999 21.5436 11.7475 21.4568 11.311C21.37 10.8746 21.1557 10.4737 20.841 10.159C20.5263 9.84434 20.1254 9.63005 19.689 9.54323C19.2525 9.45642 18.8001 9.50097 18.389 9.67127C17.9778 9.84157 17.6264 10.13 17.3792 10.5C17.132 10.87 17 11.305 17 11.75C17 12.3467 17.2371 12.919 17.659 13.341C18.081 13.7629 18.6533 14 19.25 14Z" fill="#FF4626"/>
</svg>
<h3 class="card-title text-2xl mt-3">Danger</h3>
<p class="text-gray-500 dark:text-dark-text font-medium px-[5%] mt-1.5">
This alert is created to display the relevant more information
</p>
<div class="flex-center gap-3 mt-5">
<button type="button" class="btn b-light btn-danger-light">Decline</button>
<button type="button" class="btn b-solid btn-danger-solid">Yes, Accept</button>
</div>
</div>
</div>
Warning Modal
Warning
This alert is created to display the relevant more information
<div class="relative bg-white dark:bg-dark-card rounded-lg shadow warning-border-left">
<button type="button" class="flex-center absolute top-3 end-2.5 hover:bg-gray-200 dark:hover:bg-dark-icon rounded-lg size-8 close-button">
<i class="ri-close-line text-gray-500 dark:text-dark-text text-xl"></i>
</button>
<div class="p-4 md:py-7 flex-center flex-col text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="38" viewBox="0 0 42 38" fill="none">
<path d="M20.9999 15.0001V22.5001M2.39389 29.2521C0.661887 32.2521 2.82789 36.0001 6.28989 36.0001H35.7099C39.1699 36.0001 41.3359 32.2521 39.6059 29.2521L24.8979 3.7561C23.1659 0.756104 18.8339 0.756104 17.1019 3.7561L2.39389 29.2521ZM20.9999 28.5001H21.0139V28.5161H20.9999V28.5001Z" stroke="#FFA305" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<h3 class="card-title text-2xl mt-3">Warning</h3>
<p class="text-gray-500 dark:text-dark-text font-medium px-[5%] mt-1.5">
This alert is created to display the relevant more information
</p>
<div class="flex-center gap-3 mt-5">
<button type="button" class="btn b-light btn-danger-light">Decline</button>
<button type="button" class="btn b-solid btn-warning-solid">Yes, Accept</button>
</div>
</div>
</div>
Infomational Modal
Information
This alert is created to display the relevant more information
<div class="relative bg-white dark:bg-dark-card rounded-lg shadow info-border-left">
<button type="button" class="flex-center absolute top-3 end-2.5 hover:bg-gray-200 dark:hover:bg-dark-icon rounded-lg size-8 close-button">
<i class="ri-close-line text-gray-500 dark:text-dark-text text-xl"></i>
</button>
<div class="p-4 md:py-7 flex-center flex-col text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
<path d="M23.3333 29C23.3333 29.3978 23.1752 29.7794 22.8939 30.0607C22.6126 30.342 22.2311 30.5 21.8333 30.5C21.0376 30.5 20.2745 30.1839 19.7119 29.6213C19.1493 29.0587 18.8333 28.2956 18.8333 27.5V20C18.4354 20 18.0539 19.842 17.7726 19.5607C17.4913 19.2794 17.3333 18.8978 17.3333 18.5C17.3333 18.1022 17.4913 17.7206 17.7726 17.4393C18.0539 17.158 18.4354 17 18.8333 17C19.6289 17 20.392 17.3161 20.9546 17.8787C21.5172 18.4413 21.8333 19.2044 21.8333 20V27.5C22.2311 27.5 22.6126 27.658 22.8939 27.9393C23.1752 28.2206 23.3333 28.6022 23.3333 29ZM39.8333 20C39.8333 23.8567 38.6896 27.6269 36.5469 30.8336C34.4042 34.0404 31.3587 36.5397 27.7956 38.0156C24.2324 39.4916 20.3116 39.8777 16.529 39.1253C12.7464 38.3729 9.2718 36.5157 6.54468 33.7886C3.81755 31.0615 1.96036 27.5869 1.20795 23.8043C0.455536 20.0216 0.841701 16.1008 2.31761 12.5377C3.79352 8.97451 6.29288 5.92903 9.49964 3.78634C12.7064 1.64366 16.4765 0.5 20.3333 0.5C25.5033 0.50546 30.46 2.56167 34.1158 6.21745C37.7716 9.87322 39.8278 14.83 39.8333 20ZM36.8333 20C36.8333 16.7366 35.8656 13.5465 34.0525 10.8331C32.2395 8.11968 29.6625 6.00483 26.6475 4.75599C23.6326 3.50714 20.315 3.18039 17.1143 3.81704C13.9136 4.4537 10.9736 6.02517 8.666 8.33274C6.35843 10.6403 4.78696 13.5803 4.1503 16.781C3.51365 19.9817 3.8404 23.2993 5.08925 26.3143C6.33809 29.3293 8.45294 31.9062 11.1664 33.7192C13.8798 35.5323 17.0699 36.5 20.3333 36.5C24.7078 36.495 28.9018 34.7551 31.995 31.6618C35.0883 28.5685 36.8283 24.3745 36.8333 20ZM19.5833 14C20.0283 14 20.4633 13.868 20.8333 13.6208C21.2033 13.3736 21.4917 13.0222 21.662 12.611C21.8323 12.1999 21.8768 11.7475 21.79 11.311C21.7032 10.8746 21.4889 10.4737 21.1742 10.159C20.8596 9.84434 20.4587 9.63005 20.0222 9.54323C19.5858 9.45642 19.1334 9.50097 18.7222 9.67127C18.3111 9.84157 17.9597 10.13 17.7125 10.5C17.4652 10.87 17.3333 11.305 17.3333 11.75C17.3333 12.3467 17.5703 12.919 17.9923 13.341C18.4142 13.7629 18.9865 14 19.5833 14Z" fill="#498CFF"/>
</svg>
<h3 class="card-title text-2xl mt-3">Information</h3>
<p class="text-gray-500 dark:text-dark-text font-medium px-[5%] mt-1.5">
This alert is created to display the relevant more information
</p>
<div class="flex-center gap-3 mt-5">
<button type="button" class="btn b-light btn-danger-light">Decline</button>
<button type="button" class="btn b-solid btn-info-solid">Yes, Accept</button>
</div>
</div>
</div>
Success Modal
Success
This alert is created to display the relevant more information
<div class="relative bg-white dark:bg-dark-card rounded-lg shadow success-border-left">
<button type="button" class="flex-center absolute top-3 end-2.5 hover:bg-gray-200 dark:hover:bg-dark-icon rounded-lg size-8 close-button">
<i class="ri-close-line text-gray-500 dark:text-dark-text text-xl"></i>
</button>
<div class="p-4 md:py-7 flex-center flex-col text-center">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="34" height="34" rx="17" stroke="#66CC33" stroke-width="2"/>
<path d="M10.7998 18.0004L16.1998 23.4004L25.1998 14.4004" stroke="#66CC33" stroke-width="2"/>
</svg>
<h3 class="card-title text-2xl mt-3">Success</h3>
<p class="text-gray-500 dark:text-dark-text font-medium px-[5%] mt-1.5">
This alert is created to display the relevant more information
</p>
<div class="flex-center gap-3 mt-5">
<button type="button" class="btn b-light btn-danger-light">Decline</button>
<button type="button" class="btn b-solid btn-success-solid">Yes, Accept</button>
</div>
</div>
</div>
Delete modal
Delete Account
This alert is created to display the relevant more information
<div class="relative bg-white dark:bg-dark-card rounded-lg shadow">
<button type="button" class="flex-center absolute top-3 end-2.5 hover:bg-gray-200 dark:hover:bg-dark-icon rounded-lg size-8 close-button">
<i class="ri-close-line text-gray-500 dark:text-dark-text text-xl"></i>
</button>
<div class="p-4 md:py-7 flex-center flex-col text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32" fill="none">
<path d="M28.3824 4.92308H22.2123V3.69231C22.2123 2.71305 21.8223 1.77389 21.128 1.08145C20.4337 0.38901 19.4921 0 18.5103 0H11.1062C10.1243 0 9.18268 0.38901 8.48841 1.08145C7.79414 1.77389 7.40411 2.71305 7.40411 3.69231V4.92308H1.23402C0.906736 4.92308 0.592859 5.05275 0.361436 5.28356C0.130012 5.51438 0 5.82743 0 6.15385C0 6.48027 0.130012 6.79332 0.361436 7.02413C0.592859 7.25495 0.906736 7.38462 1.23402 7.38462H2.46803V29.5385C2.46803 30.1913 2.72806 30.8174 3.19091 31.279C3.65375 31.7407 4.28151 32 4.93607 32H24.6803C25.3349 32 25.9627 31.7407 26.4255 31.279C26.8884 30.8174 27.1484 30.1913 27.1484 29.5385V7.38462H28.3824C28.7097 7.38462 29.0236 7.25495 29.255 7.02413C29.4864 6.79332 29.6164 6.48027 29.6164 6.15385C29.6164 5.82743 29.4864 5.51438 29.255 5.28356C29.0236 5.05275 28.7097 4.92308 28.3824 4.92308ZM9.87214 3.69231C9.87214 3.36589 10.0022 3.05284 10.2336 2.82202C10.465 2.59121 10.7789 2.46154 11.1062 2.46154H18.5103C18.8375 2.46154 19.1514 2.59121 19.3828 2.82202C19.6143 3.05284 19.7443 3.36589 19.7443 3.69231V4.92308H9.87214V3.69231ZM24.6803 29.5385H4.93607V7.38462H24.6803V29.5385ZM12.3402 13.5385V23.3846C12.3402 23.711 12.2102 24.0241 11.9787 24.2549C11.7473 24.4857 11.4334 24.6154 11.1062 24.6154C10.7789 24.6154 10.465 24.4857 10.2336 24.2549C10.0022 24.0241 9.87214 23.711 9.87214 23.3846V13.5385C9.87214 13.212 10.0022 12.899 10.2336 12.6682C10.465 12.4374 10.7789 12.3077 11.1062 12.3077C11.4334 12.3077 11.7473 12.4374 11.9787 12.6682C12.2102 12.899 12.3402 13.212 12.3402 13.5385ZM19.7443 13.5385V23.3846C19.7443 23.711 19.6143 24.0241 19.3828 24.2549C19.1514 24.4857 18.8375 24.6154 18.5103 24.6154C18.183 24.6154 17.8691 24.4857 17.6377 24.2549C17.4063 24.0241 17.2762 23.711 17.2762 23.3846V13.5385C17.2762 13.212 17.4063 12.899 17.6377 12.6682C17.8691 12.4374 18.183 12.3077 18.5103 12.3077C18.8375 12.3077 19.1514 12.4374 19.3828 12.6682C19.6143 12.899 19.7443 13.212 19.7443 13.5385Z" fill="#FF4626"/>
</svg>
<h3 class="card-title text-2xl mt-3">Delete Account</h3>
<p class="text-gray-500 dark:text-dark-text font-medium px-[5%] mt-1.5">
This alert is created to display the relevant more information
</p>
<div class="flex-center gap-3 mt-5">
<button type="button" class="btn b-light btn-danger-light">Yes, Delete!</button>
<button type="button" class="btn b-solid btn-primary-solid">No, Keep It.</button>
</div>
</div>
</div>
Delete modal (Two)
This alert is created to display the relevant more information
<div class="relative bg-white dark:bg-dark-card rounded-lg shadow">
<button type="button" class="flex-center absolute top-3 end-2.5 hover:bg-gray-200 dark:hover:bg-dark-icon rounded-lg size-8 close-button">
<i class="ri-close-line text-gray-500 dark:text-dark-text text-xl"></i>
</button>
<div class="p-4 md:py-7 flex-center flex-col text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32" fill="none">
<path d="M28.3824 4.92308H22.2123V3.69231C22.2123 2.71305 21.8223 1.77389 21.128 1.08145C20.4337 0.38901 19.4921 0 18.5103 0H11.1062C10.1243 0 9.18268 0.38901 8.48841 1.08145C7.79414 1.77389 7.40411 2.71305 7.40411 3.69231V4.92308H1.23402C0.906736 4.92308 0.592859 5.05275 0.361436 5.28356C0.130012 5.51438 0 5.82743 0 6.15385C0 6.48027 0.130012 6.79332 0.361436 7.02413C0.592859 7.25495 0.906736 7.38462 1.23402 7.38462H2.46803V29.5385C2.46803 30.1913 2.72806 30.8174 3.19091 31.279C3.65375 31.7407 4.28151 32 4.93607 32H24.6803C25.3349 32 25.9627 31.7407 26.4255 31.279C26.8884 30.8174 27.1484 30.1913 27.1484 29.5385V7.38462H28.3824C28.7097 7.38462 29.0236 7.25495 29.255 7.02413C29.4864 6.79332 29.6164 6.48027 29.6164 6.15385C29.6164 5.82743 29.4864 5.51438 29.255 5.28356C29.0236 5.05275 28.7097 4.92308 28.3824 4.92308ZM9.87214 3.69231C9.87214 3.36589 10.0022 3.05284 10.2336 2.82202C10.465 2.59121 10.7789 2.46154 11.1062 2.46154H18.5103C18.8375 2.46154 19.1514 2.59121 19.3828 2.82202C19.6143 3.05284 19.7443 3.36589 19.7443 3.69231V4.92308H9.87214V3.69231ZM24.6803 29.5385H4.93607V7.38462H24.6803V29.5385ZM12.3402 13.5385V23.3846C12.3402 23.711 12.2102 24.0241 11.9787 24.2549C11.7473 24.4857 11.4334 24.6154 11.1062 24.6154C10.7789 24.6154 10.465 24.4857 10.2336 24.2549C10.0022 24.0241 9.87214 23.711 9.87214 23.3846V13.5385C9.87214 13.212 10.0022 12.899 10.2336 12.6682C10.465 12.4374 10.7789 12.3077 11.1062 12.3077C11.4334 12.3077 11.7473 12.4374 11.9787 12.6682C12.2102 12.899 12.3402 13.212 12.3402 13.5385ZM19.7443 13.5385V23.3846C19.7443 23.711 19.6143 24.0241 19.3828 24.2549C19.1514 24.4857 18.8375 24.6154 18.5103 24.6154C18.183 24.6154 17.8691 24.4857 17.6377 24.2549C17.4063 24.0241 17.2762 23.711 17.2762 23.3846V13.5385C17.2762 13.212 17.4063 12.899 17.6377 12.6682C17.8691 12.4374 18.183 12.3077 18.5103 12.3077C18.8375 12.3077 19.1514 12.4374 19.3828 12.6682C19.6143 12.899 19.7443 13.212 19.7443 13.5385Z" fill="#FF4626"/>
</svg>
<p class="text-gray-500 dark:text-dark-text font-medium px-[5%] mt-3">
This alert is created to display the relevant more information
</p>
<div class="flex-center flex-col gap-3 mt-5 w-full">
<button type="button" class="btn b-light btn-danger-light w-full">Yes, Delete!</button>
<button type="button" class="btn b-solid btn-primary-solid w-full">No, Keep It.</button>
</div>
</div>
</div>
Delete modal (small)
Delete Account
You’re going to delete the account. Are you sure?
<div class="relative bg-white dark:bg-dark-card rounded-lg shadow">
<button type="button" class="flex-center absolute top-3 end-2.5 hover:bg-gray-200 dark:hover:bg-dark-icon rounded-lg size-8 close-button">
<i class="ri-close-line text-gray-500 dark:text-dark-text text-xl"></i>
</button>
<div class="p-4 md:py-5 flex-center items-start flex-col">
<h3 class="card-title text-xl mt-3">Delete Account</h3>
<p class="text-gray-500 dark:text-dark-text font-medium mt-1.5">
You’re going to delete the account. Are you sure?
</p>
<div class="flex-center gap-3 mt-5">
<button type="button" class="btn b-solid btn-danger-solid">Yes, Delete!</button>
<button type="button" class="btn b-solid btn-primary-solid">No, Keep It.</button>
</div>
</div>
</div>