Modal & Closes
- Advanced UI
- Modal & Closes
Basic Modal
Launch demo modal
Modal title
...
<div id="todo-compose" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-backdrop-open:bg-[#11182780] hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-[106] opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="todo-compose-label">
<div class="sm:max-w-lg sm:w-full m-3 sm:mx-auto">
<div class="flex flex-col bg-white border border-defaultborder rounded-md pointer-events-auto dark:bg-neutral-800 dark:shadow-neutral-700/70">
<div class="flex justify-between items-center py-3 px-4 border-b border-b-defaultborder ">
<h6 class="modal-title !text-[1rem] font-semibold" id="mail-ComposeLabel">Modal title</h6>
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-gray-500 focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 " aria-label="Close" data-hs-overlay="#todo-compose">
<span class="sr-only">Close</span>
<svg class="shrink-0 size-4" 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">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="ti-modal-body px-4">
...
</div>
<div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-t-defaultborder">
<button type="button" class="ti-btn btn-wave ti-btn-secondary align-middle" data-hs-overlay="#todo-compose">
Close
</button>
<button type="button" class="ti-btn ti-btn-primary">Save Changes</button>
</div>
</div>
</div>
</div>
Static backdrop
Launch static backdrop modal
Modal title
I will not close if you click outside me.
<div id="staticBackdrop" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-backdrop-open:bg-[#11182780] hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-[106] opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="staticBackdrop-label">
<div class="sm:max-w-lg sm:w-full m-3 sm:mx-auto">
<div class="flex flex-col bg-white border border-defaultborder rounded-md pointer-events-auto dark:bg-neutral-800 dark:shadow-neutral-700/70">
<div class="flex justify-between items-center py-3 px-4 border-b border-b-defaultborder ">
<h6 class="modal-title !text-[1rem] font-semibold" id="mail-ComposeLabel">Modal title</h6>
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-gray-500 focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 " aria-label="Close" data-hs-overlay="#staticBackdrop">
<span class="sr-only">Close</span>
<svg class="shrink-0 size-4" 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">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="ti-modal-body px-4">
<p>I will not close if you click outside me. Don't even try to
press
escape key.</p>
</div>
<div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-t-defaultborder">
<button type="button" class="ti-btn btn-wave ti-btn-secondary align-middle" data-hs-overlay="#staticBackdrop">
Close
</button>
<button type="button" class="ti-btn ti-btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Scrolling long content
Scrolling long content
Modal title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea voluptatibus, ipsam quo est rerum modi quos expedita facere, ex tempore fuga similique ipsa blanditiis et accusamus temporibus commodi voluptas! Nobis veniam illo architecto expedita quam ratione quaerat omnis. In, recusandae eos! Pariatur, deleniti quis ad nemo ipsam officia temporibus, doloribus fuga asperiores ratione distinctio velit alias hic modi praesentium aperiam officiis eaque, accusamus aut. Accusantium assumenda, commodi nulla provident asperiores fugit inventore iste amet aut placeat consequatur reprehenderit. Ratione tenetur eligendi, quis aperiam dolores magni iusto distinctio voluptatibus minus a unde at! Consequatur voluptatum in eaque obcaecati, impedit accusantium ea soluta, excepturi, quasi quia commodi blanditiis? Qui blanditiis iusto corrupti necessitatibus dolorem fugiat consequuntur quod quo veniam? Labore dignissimos reiciendis accusamus recusandae est consequuntur iure.
Lorem ipsum dolor sit amet.
<div id="exampleModalScrollable" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-backdrop-open:bg-[#11182780] hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-[106] opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="exampleModalScrollable-label">
<div class="sm:max-w-lg sm:w-full m-3 sm:mx-auto modal-dialog-scrollable">
<div class="flex flex-col bg-white border border-defaultborder rounded-md pointer-events-auto dark:bg-neutral-800 dark:shadow-neutral-700/70">
<div class="flex justify-between items-center py-3 px-4 border-b border-b-defaultborder">
<h6 class="modal-title !text-[1rem] font-semibold" id="staticBackdropLabel2">Modal title </h6>
<button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-gray-800 focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 " aria-label="Close" data-hs-overlay="#exampleModalScrollable">
<span class="sr-only">Close</span>
<svg class="shrink-0 size-4" 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">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="ti-modal-body px-4">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Libero
ipsum quasi, error quibusdam debitis maiores hic eum? Vitae
nisi
ipsa maiores fugiat deleniti quis reiciendis veritatis.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea
voluptatibus, ipsam quo est rerum modi quos expedita facere,
ex
tempore fuga similique ipsa blanditiis et accusamus
temporibus
commodi voluptas! Nobis veniam illo architecto expedita quam
ratione quaerat omnis. In, recusandae eos! Pariatur,
deleniti
quis ad nemo ipsam officia temporibus, doloribus fuga
asperiores
ratione distinctio velit alias hic modi praesentium aperiam
officiis eaque, accusamus aut. Accusantium assumenda,
commodi
nulla provident asperiores fugit inventore iste amet aut
placeat
consequatur reprehenderit. Ratione tenetur eligendi, quis
aperiam dolores magni iusto distinctio voluptatibus minus a
unde
at! Consequatur voluptatum in eaque obcaecati, impedit
accusantium ea soluta, excepturi, quasi quia commodi
blanditiis?
Qui blanditiis iusto corrupti necessitatibus dolorem fugiat
consequuntur quod quo veniam? Labore dignissimos reiciendis
accusamus recusandae est consequuntur iure.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-t-defaultborder">
<button type="button" class="ti-btn btn-wave ti-btn-secondary align-middle" data-hs-overlay="#exampleModalScrollable">
Close
</button>
<button type="button" class="ti-btn ti-btn-primary">Save Changes</button>
</div>
</div>
</div>
</div>
Vertically centered modal
Modal title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.
<div id="hs-vertically-centered-modal" class="hs-overlay hidden size-full fixed top-0 start-0 z-[106] hs-overlay-backdrop-open:bg-[#11182780] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-vertically-centered-modal-label">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto min-h-[calc(100%-56px)] flex items-center">
<div class="w-full flex flex-col bg-white border b rounded-md pointer-events-auto border-defaultborder">
<div class="flex justify-between items-center py-3 px-4 border-b border-b-defaultborder">
<h6 class="modal-title !text-[1rem] font-semibold" id="staticBackdropLabel2">Modal title </h6>
<button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-gray-800 focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 " aria-label="Close" data-hs-overlay="#hs-vertically-centered-modal">
<span class="sr-only">Close</span>
<svg class="shrink-0 size-4" 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">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="ti-modal-body">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Libero
ipsum quasi, error quibusdam debitis maiores hic eum? Vitae
nisi
ipsa maiores fugiat deleniti quis reiciendis veritatis.</p>
</div>
<div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-t-defaultborder">
<button type="button" class="ti-btn btn-wave ti-btn-secondary align-middle" data-hs-overlay="#hs-vertically-centered-modal">
Close
</button>
<button type="button" class="ti-btn ti-btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Vertical Centered Scrollable
Modal title
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea voluptatibus, ipsam quo est rerum modi quos expedita facere, ex tempore fuga similique ipsa blanditiis et accusamus temporibus commodi voluptas! Nobis veniam illo architecto expedita quam ratione quaerat omnis. In, recusandae eos! Pariatur, deleniti quis ad nemo ipsam officia temporibus, doloribus fuga asperiores ratione distinctio velit alias hic modi praesentium aperiam officiis eaque, accusamus aut. Accusantium assumenda, commodi nulla provident asperiores fugit inventore iste amet aut placeat consequatur reprehenderit. Ratione tenetur eligendi, quis aperiam dolores magni iusto distinctio voluptatibus minus a unde at! Consequatur voluptatum in eaque obcaecati, impedit accusantium ea soluta, excepturi, quasi quia commodi blanditiis? Qui blanditiis iusto corrupti necessitatibus dolorem fugiat consequuntur quod quo veniam? Labore dignissimos reiciendis accusamus recusandae est consequuntur iure.
Lorem ipsum dolor sit amet.
<div id="hs-vertically-centered-scrollable-modal" class="hs-overlay hidden size-full fixed top-0 start-0 z-[106] hs-overlay-backdrop-open:bg-[#11182780] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-vertically-centered-scrollable-modal-label">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto min-h-[calc(100%-56px)] flex items-center">
<div class="w-full flex flex-col bg-white border b rounded-md pointer-events-auto border-defaultborder">
<div class="flex justify-between items-center py-3 px-4 border-b border-b-defaultborder">
<h6 class="modal-title !text-[1rem] font-semibold" id="staticBackdropLabel2">Modal title </h6>
<button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-gray-800 focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 " aria-label="Close" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
<span class="sr-only">Close</span>
<svg class="shrink-0 size-4" 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">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="ti-modal-body overflow-y-auto">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea
voluptatibus, ipsam quo est rerum modi quos expedita facere,
ex
tempore fuga similique ipsa blanditiis et accusamus
temporibus
commodi voluptas! Nobis veniam illo architecto expedita quam
ratione quaerat omnis. In, recusandae eos! Pariatur,
deleniti
quis ad nemo ipsam officia temporibus, doloribus fuga
asperiores
ratione distinctio velit alias hic modi praesentium aperiam
officiis eaque, accusamus aut. Accusantium assumenda,
commodi
nulla provident asperiores fugit inventore iste amet aut
placeat
consequatur reprehenderit. Ratione tenetur eligendi, quis
aperiam dolores magni iusto distinctio voluptatibus minus a
unde
at! Consequatur voluptatum in eaque obcaecati, impedit
accusantium ea soluta, excepturi, quasi quia commodi
blanditiis?
Qui blanditiis iusto corrupti necessitatibus dolorem fugiat
consequuntur quod quo veniam? Labore dignissimos reiciendis
accusamus recusandae est consequuntur iure.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-t-defaultborder">
<button type="button" class="py-2 px-3 inline-flex items-center ti-btn btn-wave ti-btn-secondary align-middle" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
Close
</button>
<button type="button" class="ti-btn ti-btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Tooltips and popovers
Modal title
Popover in a modal
This
triggers a popover on click.
Tooltips in a modal
<div id="exampleModalScrollable4" class="hs-overlay hidden size-full fixed top-0 start-0 z-[106] hs-overlay-backdrop-open:bg-[#11182780] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="exampleModalScrollable4-label">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto min-h-[calc(100%-56px)] flex items-center">
<div class="w-full flex flex-col bg-white border b rounded-md pointer-events-auto border-defaultborder">
<div class="flex justify-between items-center py-3 px-4 border-b border-b-defaultborder">
<h6 class="modal-title !text-[1rem] font-semibold" id="staticBackdropLabel2">Modal title </h6>
<button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-gray-800 focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 " aria-label="Close" data-hs-overlay="#exampleModalScrollable4">
<span class="sr-only">Close</span>
<svg class="shrink-0 size-4" 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">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="ti-modal-body">
<h5 class="!font-medium">Popover in a modal</h5>
<div class="mb-2 flex !items-center">This
<div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right] rtl:[--placement:left] !ms-2">
<a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn btn-wave ti-btn-secondary me-1" href="javascript:void(0);">button
<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible border z-[99] border-defaultborder dark:bg-bodybg bg-white !p-0 !max-w-[276px] hidden !rounded-sm" role="tooltip">
<div class="!border-b !border-solid !rounded-t-md !py-2 !px-4 text-defaulttextcolor border-defaultborder text-start w-full !text-[1rem]">
<h6>Popover Title</h6>
</div>
<p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover body content is set in this attribute.</p>
</div>
</a>
</div>
triggers a popover on click.</div>
<hr class="my-2">
<h5 class="!font-medium">Tooltips in a modal</h5>
<div>
<div class="hs-tooltip ti-main-tooltip">
<button type="button" class="hs-tooltip-toggle text-primary">
This Link
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity py-1 px-2 !bg-black !text-xs !font-medium !text-white !shadow-sm !rounded-sm"
role="tooltip">
Tooltip
</span>
</button>
</div>
and
<div class="hs-tooltip ti-main-tooltip">
<button type="button" class="hs-tooltip-toggle text-primary">
This Link
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity py-1 px-2 !bg-black !text-xs !font-medium !text-white !shadow-sm !rounded-sm"
role="tooltip">
Tooltip
</span>
</button>
</div>
have tooltips on hover.
</div>
</div>
<div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-t-defaultborder">
<button type="button" class="py-2 px-3 inline-flex items-center ti-btn btn-wave ti-btn-secondary align-middle" data-hs-overlay="#exampleModalScrollable4">
Close
</button>
<button type="button" class="ti-btn ti-btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Using the grid
Modal title
01
02
03
04
05
06
07
<div id="exampleModalgrid" class="hs-overlay hidden size-full fixed top-0 start-0 z-[106] hs-overlay-backdrop-open:bg-[#11182780] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="exampleModalgrid-label">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto min-h-[calc(100%-56px)] flex items-center">
<div class="w-full flex flex-col bg-white border b rounded-md pointer-events-auto border-defaultborder">
<div class="flex justify-between items-center py-3 px-4 border-b border-b-defaultborder">
<h6 class="modal-title !text-[1rem] font-semibold" id="staticBackdropLabel2">Modal title </h6>
<button type="button" class="size-6 inline-flex justify-center items-center gap-x-2 text-gray-800 focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 " aria-label="Close" data-hs-overlay="#exampleModalgrid">
<span class="sr-only">Close</span>
<svg class="shrink-0 size-4" 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">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="ti-modal-body">
<div class="container-fluid">
<div class="grid grid-cols-3 gap-4">
<div class="rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">01</div>
<div class="rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">02</div>
<div class="rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">03</div>
<div class="col-span-2 rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">04</div>
<div class="rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">05</div>
<div class="rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">06</div>
<div class="col-span-2 rounded-sm bg-light border border-defaultborder dark:border-defaultborder/20 p-4">07</div>
</div>
</div>
</div>
<div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-t-defaultborder">
<button type="button" class="py-2 px-3 inline-flex items-center ti-btn btn-wave ti-btn-secondary align-middle" data-hs-overlay="#exampleModalgrid">
Close
</button>
<button type="button" class="ti-btn ti-btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Toggle between modals
Modal 1
Show a second modal and hide this one with the button below.
Modal 1
Hide this modal and show the first with the button below.
<div id="hs-toggle-between-modals-first-modal" class="hs-overlay hs-overlay-backdrop-open:bg-[#11182780] hidden size-full fixed top-0 start-0 z-[106] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-toggle-between-modals-first-modal-label">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
<div class="flex flex-col bg-white border border-defaultborder shadow-2xs rounded-sm pointer-events-auto dark:bg-neutral-800 ">
<div class="flex justify-between items-center py-3 px-4 border-b border-defaultborder">
<h6 class="modal-title !text-[1rem] font-semibold" id="staticBackdropLabel2">Modal 1 </h6>
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-gray-500 focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none " aria-label="Close" data-hs-overlay="#hs-toggle-between-modals-first-modal" data-hs-overlay-close="">
<span class="sr-only">Close</span>
<svg class="shrink-0 size-4" 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">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="p-4 overflow-y-auto">
<p class="mt-1 text-gray-500 dark:text-neutral-400">
Show a second modal and hide this one with the button below.
</p>
</div>
<div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-defaultborder">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary !text-white focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-toggle-between-modals-second-modal" data-hs-overlay="#hs-toggle-between-modals-second-modal">
Open second modal
</button>
</div>
</div>
</div>
</div>
<div id="hs-toggle-between-modals-second-modal" class="hs-overlay hs-overlay-backdrop-open:bg-[#11182780] hidden size-full fixed top-0 start-0 z-[106] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-toggle-between-modals-second-modal-label">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
<div class="flex flex-col bg-white border border-defaultborder shadow-2xs rounded-sm pointer-events-auto dark:bg-neutral-800 ">
<div class="flex justify-between items-center py-3 px-4 border-b border-defaultborder">
<h6 class="modal-title !text-[1rem] font-semibold" id="staticBackdropLabel2">Modal 1 </h6>
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent text-gray-500 focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none " aria-label="Close" data-hs-overlay="#hs-toggle-between-modals-second-modal" data-hs-overlay-close="">
<span class="sr-only">Close</span>
<svg class="shrink-0 size-4" 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">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="p-4 overflow-y-auto">
<p class="mt-1 text-gray-500 dark:text-neutral-400">
Hide this modal and show the first with the button below.
</p>
</div>
<div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-defaultborder">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary !text-white focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-toggle-between-modals-first-modal" data-hs-overlay="#hs-toggle-between-modals-first-modal">
Back to first
</button>
</div>
</div>
</div>
Optional sizes
Extra large modal
...
large modal
...
Small Modal
...
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary" data-hs-overlay="#hs-extralarge-modal">
Extra Large modal
</button>
<div id="hs-extralarge-modal" class="hs-overlay hidden ti-modal hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn"
data-hs-overlay="#hs-extralarge-modal">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="ti-modal-body">
<p class="!mt-1 text-textmuted ">
...
</p>
</div>
</div>
</div>
</div>
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary" data-hs-overlay="#hs-large-modal">
Large modal
</button>
<div id="hs-large-modal" class="hs-overlay hidden ti-modal hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out md:!max-w-2xl md:w-full m-3 md:mx-auto">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn"
data-hs-overlay="#hs-large-modal">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="ti-modal-body">
<p class="!mt-1 text-textmuted ">
...
</p>
</div>
</div>
</div>
</div>
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary" data-hs-overlay="#hs-small-modal">
small modal
</button>
<div id="hs-small-modal" class="hs-overlay hidden ti-modal hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn"
data-hs-overlay="#hs-small-modal">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="ti-modal-body">
<p class="!mt-1 text-textmuted ">
...
</p>
</div>
</div>
</div>
</div>
Modal With Slide Down Animation
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
<button> type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary" data-hs-overlay="#hs-slide-down-animation-modal">
Open modal
</button>
<div id="hs-slide-down-animation-modal" class="hs-overlay hidden ti-modal hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h3> class="ti-modal-title">
Modal title
</h3>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-slide-down-animation-modal">
<span> class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"></path>
</svg>
</button>
</div>
<div class="ti-modal-body">
<p> class="mt-1 dark:text-white/70">
This is a wider card with supporting text below as a natural lead-in to additional content.
</p>
</div>
<div class="ti-modal-footer">
<button> type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary" data-hs-overlay="#hs-slide-down-animation-modal">
Close
</button>
<a> class="ti-btn btn-wave ti-btn-primary" href="javascript:void(0);">
Save changes
</a>
</div>
</div>
</div>
</div>
Modal With Slide Up Animation
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary"
data-hs-overlay="#hs-slide-up-animation-modal">
Open modal
</button>
<div id="hs-slide-up-animation-modal" class="hs-overlay hidden ti-modal hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ">
<div class="hs-overlay-open:!mt-7 !mt-14 ease-out ti-modal-box">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h3 class="ti-modal-title">
Modal title
</h3>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn"
data-hs-overlay="#hs-slide-up-animation-modal">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z"
fill="currentColor"></path>
</svg>
</button>
</div>
<div class="ti-modal-body">
<p class="!mt-1 dark:text-white/70">
This is a wider card with supporting text below as a natural lead-in to additional content.
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary"
data-hs-overlay="#hs-slide-up-animation-modal">
Close
</button>
<a class="ti-btn btn-wave ti-btn-primary" href="javascript:void(0);">
Save changes
</a>
</div>
</div>
</div>
</div>
Modal Focus Management
Modal title
<button> type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary" data-hs-overlay="#hs-focus-management-modal">
Open modal
</button>
<div id="hs-focus-management-modal" class="hs-overlay hidden ti-modal hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h3> class="ti-modal-title">
Modal title
</h3>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-focus-management-modal">
<span> class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"></path>
</svg>
</button>
</div>
<div class="ti-modal-body">
<label> for="input-label" class="ti-form-label">Email</label>
<input type="email" id="input-label" class="ti-form-input" placeholder="you@site.com" autofocus="">
</div>
<div class="ti-modal-footer">
<button> type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary" data-hs-overlay="#hs-focus-management-modal">
Close
</button>
<a> class="ti-btn btn-wave ti-btn-primary" href="javascript:void(0);">
Save changes
</a>
</div>
</div>
</div>
</div>
Stacked Overlays
Modal title (level 1)
Stacked Overlays modals are a user interface design concept where multiple overlay windows, or modals, are displayed on top of each other, typically in a web or app interface. These modals are often used to present additional information, confirm actions, or to guide users through multi-step processes. The key characteristic of Stacked Overlays is their layered appearance, where each new modal partially covers the previous one, creating a stack effect. This stacking can provide a visual cue to users about the depth of their interaction or the sequence of tasks. To maintain usability, these modals are designed with careful attention to transparency, size, and the ability to easily return to previous layers. They often incorporate animations for smooth transitions between layers and may include features like dimming the background to focus user attention on the active modal.
Modal title (level 2)
Stacked Overlays modals represent a design approach in user interfaces, where several overlay windows, known as modals, are layered on top of one another. This is commonly seen in web or mobile application interfaces.
Extra large modal
Stacked Overlays: UI design with layered modals, often in web/apps, where each window overlays the previous one.
<button type="button" class="ti-btn btn-wave ti-btn-primary" data-hs-overlay="#hs-stacked-overlays">
Open modal
</button>
<div id="hs-stacked-overlays" class="hs-overlay hidden ti-modal pointer-events-none">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content pointer-events-auto">
<div class="ti-modal-header">
<h3 class="ti-modal-title">
Modal title (level 1)
</h3>
<button type="button" class="ti-modal-close-btn" data-hs-overlay="#hs-stacked-overlays">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" 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">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="ti-modal-body">
<p class="!mt-1 !mb-2 dark:text-white/70">
Stacked Overlays modals are a user interface design concept where multiple overlay windows, or
modals, are displayed on top of each other, typically in a web or app interface. These modals are
often used to present additional information, confirm actions, or to guide users through multi-step
processes. The key characteristic of Stacked Overlays is their layered appearance, where each new
modal partially covers the previous one, creating a stack effect. This stacking can provide a visual
cue to users about the depth of their interaction or the sequence of tasks. To maintain usability,
these modals are designed with careful attention to transparency, size, and the ability to easily
return to previous layers. They often incorporate animations for smooth transitions between layers
and may include features like dimming the background to focus user attention on the active modal.
</p>
<button type="button" class="ti-btn btn-wave ti-btn-primary" data-hs-overlay="#hs-stacked-overlays-2"
data-hs-overlay-options="{
"isClosePrev": false
}">
Open modal
</button>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary"
data-hs-overlay="#hs-stacked-overlays">
Close
</button>
<button type="button" class="ti-btn btn-wave ti-btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<div id="hs-stacked-overlays-2"
class="hs-overlay hs-overlay-backdrop-open:bg-gray-900/70 hidden ti-modal z-[70] pointer-events-none">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content pointer-events-auto">
<div class="ti-modal-header">
<h3 class="ti-modal-title">
Modal title (level 2)
</h3>
<button type="button"
class="flex justify-center items-center size-7 text-sm font-semibold !rounded-full border border-transparent hover: disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-bodybg dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-white/10"
data-hs-overlay="#hs-stacked-overlays-2" data-hs-overlay-options="{
"isClosePrev": false
}">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" 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">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="ti-modal-body">
<p class="!mt-1 !mb-2 dark:text-white/70">
Stacked Overlays modals represent a design approach in user interfaces, where several overlay
windows, known as modals, are layered on top of one another. This is commonly seen in web or mobile
application interfaces.
</p>
<button type="button" class="ti-btn btn-wave ti-btn-primary" data-hs-overlay="#hs-stacked-overlays-3"
data-hs-overlay-options="{
"isClosePrev": false
}">
Open modal
</button>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary"
data-hs-overlay="#hs-stacked-overlays-2" data-hs-overlay-options="{
"isClosePrev": false
}">
Close
</button>
<button type="button" class="ti-btn btn-wave ti-btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<div id="hs-stacked-overlays-3"
class="hs-overlay hs-overlay-backdrop-open:bg-gray-900/80 hidden ti-modal z-[80] pointer-events-none">
<div class="hs-overlay-open:mt-7 ti-modal-box ease-out">
<div class="ti-modal-content pointer-events-auto ">
<div class="ti-modal-header">
<h3 class="ti-modal-title">
Modal title (level 3)
</h3>
<button type="button"
class="flex justify-center items-center size-7 text-sm font-semibold !rounded-full border border-transparent hover: disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-bodybg dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-white/10"
data-hs-overlay="#hs-stacked-overlays-3" data-hs-overlay-options="{
"isClosePrev": false
}">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" 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">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="ti-modal-body">
<p class="!mt-1 dark:text-white/70">
Stacked Overlays: UI design with layered modals, often in web/apps, where each window overlays the
previous one.
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary"
data-hs-overlay="#hs-stacked-overlays-3" data-hs-overlay-options="{
"isClosePrev": false
}">
Close
</button>
<button type="button" class="ti-btn btn-wave ti-btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
Custom backdrop color
Modal title
This is a wider card with supporting text below as a natural lead-in to additional content.
<button> type="button" class="ti-btn btn-wave ti-btn-primary" data-hs-overlay="#hs-custom-backdrop-modal">
Open modal
</button>
<div id="hs-custom-backdrop-modal"
class="hs-overlay hs-overlay-backdrop-open:bg-primary/50 hidden ti-modal z-[80] pointer-events-none">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content pointer-events-auto">
<div class="ti-modal-header">
<h3> class="ti-modal-title">
Modal title
</h3>
<button type="button"
class="flex justify-center items-center size-7 text-sm font-semibold !rounded-full border border-transparent hover: disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
data-hs-overlay="#hs-custom-backdrop-modal">
<span> class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" 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">
<path> d="M18 6 6 18"></path>
<path> d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="ti-modal-body">
<p> class="mt-1 dark:text-white/70">
This is a wider card with supporting text below as a natural lead-in to additional content.
</p>
</div>
<div class="ti-modal-footer">
<button> type="button" class="hs-dropdown-toggle hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary"
data-hs-overlay="#hs-custom-backdrop-modal">
Close
</button>
<a> class="ti-btn btn-wave ti-btn-primary" href="javascript:void(0);">
Save changes
</a>
</div>
</div>
</div>
</div>
Fullscreen modal
Full screen
...
!
Full screen below sm
...
!
Full screen below md
...
!
Full screen below lg
...
!
Full screen below xl
...
<button type="button" class="m-1 ms-0 ti-btn btn-wave ti-btn-primary-full" data-hs-overlay="#hs-full-screen-modal">
Full screen
</button>
<div id="hs-full-screen-modal" class="hs-overlay hidden ti-modal hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ">
<div class="hs-overlay-open:mt-0 ti-modal-box mt-10 !m-0 !max-w-full !w-full">
<div class="ti-modal-content !rounded-none">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-full-screen-modal">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"/>
</svg>
</button>
</div>
<div class="ti-modal-body">
<p class="!mt-1 text-textmuted ">
...
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal">
Close
</button>
</div>
</div>
</div>
</div>
<button type="button" class="m-1 ms-0 ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal-below-sm">
Full screen below sm
</button>
<div id="hs-full-screen-modal-below-sm" class="hs-overlay hidden ti-modal hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ">
<div class="hs-overlay-open:mt-0 ti-modal-box mt-10 max-w-full w-full !m-0 sm:hs-overlay-open:!mt-10 sm:!mt-0 sm:max-w-lg sm:!mx-auto">
<div class="ti-modal-content sm:border sm:rounded-sm sm:!shadow-sm dark:bg-bodybg sm:dark:border-white/10">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-full-screen-modal-below-sm">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"/>
</svg>
</button>
</div>
<div class="ti-modal-body">
<p class="!mt-1 text-textmuted ">
...
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal">
Close
</button>
</div>
</div>
</div>
</div>
<button type="button" class="m-1 ms-0 ti-btn btn-wave ti-btn-warning-full" data-hs-overlay="#hs-full-screen-modal-below-md">
Full screen below md
</button>
<div id="hs-full-screen-modal-below-md" class="hs-overlay hidden ti-modal hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ">
<div class="hs-overlay-open:mt-0 ti-modal-box mt-10 !max-w-full w-full !m-0 md:hs-overlay-open:!mt-10 md:!mt-0 md:!max-w-lg md:!mx-auto">
<div class="ti-modal-content md:border md:rounded-sm md:!shadow-sm md:dark:border-white/10">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-full-screen-modal-below-md">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"/>
</svg>
</button>
</div>
<div class="ti-modal-body">
<p class="!mt-1 text-textmuted ">
...
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal">
Close
</button>
</div>
</div>
</div>
</div>
<button type="button" class="m-1 ms-0 ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal-below-lg">
Full screen below lg
</button>
<div id="hs-full-screen-modal-below-lg" class="hs-overlay hidden ti-modal hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ">
<div class="hs-overlay-open:mt-0 ti-modal-box mt-10 !max-w-full w-full !m-0 lg:hs-overlay-open:!mt-10 lg:!mt-0 lg:!max-w-lg lg:!mx-auto">
<div class="ti-modal-content lg:border lg:rounded-sm lg:!shadow-sm lg:dark:border-white/10">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-full-screen-modal-below-lg">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"/>
</svg>
</button>
</div>
<div class="ti-modal-body">
<p class="!mt-1 text-textmuted ">
...
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal">
Close
</button>
</div>
</div>
</div>
</div>
<button type="button" class="m-1 ms-0 ti-btn btn-wave ti-btn-success-full" data-hs-overlay="#hs-full-screen-modal-below-xl">
Full screen below xl
</button>
<div id="hs-full-screen-modal-below-xl" class="hs-overlay hidden ti-modal hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ">
<div class="hs-overlay-open:mt-0 ti-modal-box mt-10 !max-w-full w-full !m-0 xl:hs-overlay-open:!mt-10 xl:!mt-0 xl:!max-w-xl xl:!mx-auto">
<div class="ti-modal-content xl:border xl:rounded-sm xl:!shadow-sm xl:dark:border-white/10">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-full-screen-modal-below-xl">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"/>
</svg>
</button>
</div>
<div class="ti-modal-body">
<p class="!mt-1 text-textmuted ">
...
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal">
Close
</button>
</div>
</div>
</div>
</div>
<button type="button" class="m-1 ms-0 ti-btn btn-wave ti-btn-danger-full" data-hs-overlay="#hs-full-screen-modal-below-xxl">
Full screen below xxl
</button>
<div id="hs-full-screen-modal-below-xxl" class="hs-overlay hidden ti-modal hs-overlay-open:opacity-100 hs-overlay-open:duration-500 ">
<div class="hs-overlay-open:mt-0 ti-modal-box mt-10 !max-w-full w-full !m-0 xxl:hs-overlay-open:!mt-10 xxl:!mt-0 xxl:!max-w-xl xxl:!mx-auto">
<div class="ti-modal-content xxl:border xxl:rounded-sm xxl:!shadow-sm xxl:dark:border-white/10">
<div class="ti-modal-header">
<h6 class="ti-modal-title">
Modal title
</h6>
<button type="button" class="hs-dropdown-toggle ti-modal-close-btn" data-hs-overlay="#hs-full-screen-modal-below-xl">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor"/>
</svg>
</button>
</div>
<div class="ti-modal-body">
<p class="!mt-1 text-textmuted ">
...
</p>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full" data-hs-overlay="#hs-full-screen-modal">
Close
</button>
</div>
</div>
</div>
</div>Close Buttons:
Basic Close
<button type="button" class="hs-dropdown-toggle !text-[1.5rem] !font-medium !text-[#8c9097] dark:text-white/50 hover:text-defaulttextcolor" data-hs-overlay="#formmodalmdo">
<span class="sr-only">Close</span>
<i class="ri-close-line"></i>
</button>
Disable state
<button type="button" disabled="" class="hs-dropdown-toggle !text-[1.5rem] disabled:opacity-50 disabled:pointer-events-none !font-medium !text-[#8c9097] dark:text-white/50/25 pointer-events-none" data-hs-overlay="#formmodalmdo">
<span class="sr-only">Close</span>
<i class="ri-close-line"></i>
</button>
White variant
<button type="button" class="hs-dropdown-toggle !text-[1.5rem] !font-medium !text-[#8c9097] dark:text-white/50 hover:!text-[#8c9097]" data-hs-overlay="#formmodalmdo">
<span class="sr-only">Close</span>
<i class="ri-close-line"></i>
</button>
<button type="button" disabled="" class="hs-dropdown-toggle !text-[1.5rem] !font-medium !text-[#8c9097] disabled:opacity-50 disabled:pointer-events-none dark:text-white/50/25 pointer-events-none" data-hs-overlay="#formmodalmdo">
<span class="sr-only">Close</span>
<i class="ri-close-line"></i>
</button>