Modal

Ripple UI comes with Modal component that can be used to capture user modal.

Default

Simple example of modal.

HTML
JSX
<label class="btn btn-primary" for="modal-1">Open Modal</label>
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
<label class="modal-overlay" for="modal-1"></label>
<div class="modal-content flex flex-col gap-5">
<label for="modal-1" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"></label>
<h2 class="text-xl">Modal title 1</h2>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorum voluptate ratione dicta. Maxime cupiditate, est commodi consectetur earum iure, optio, obcaecati in nulla saepe maiores nobis iste quasi alias!</span>
<div class="flex gap-3">
<button class="btn btn-error btn-block">Delete</button>
<button class="btn btn-block">Cancel</button>
</div>
</div>
</div>

Custom Size

Modal can have a custom size.

HTML
JSX
<label class="btn btn-primary" for="modal-2">Open Modal</label>
<input class="modal-state" id="modal-2" type="checkbox" />
<div class="modal w-screen">
<label class="modal-overlay" for="modal-2"></label>
<div class="modal-content flex flex-col gap-5 max-w-3xl">
<label for="modal-2" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"></label>
<h2 class="text-xl">Modal title 2</h2>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorum voluptate ratione dicta. Maxime cupiditate, est commodi consectetur earum iure, optio, obcaecati in nulla saepe maiores nobis iste quasi alias!</span>
<div class="flex gap-3">
<button class="btn btn-error btn-block">Delete</button>
<button class="btn btn-block">Cancel</button>
</div>
</div>
</div>

On click overlay not close.

Overlay click will not close the drawer.

HTML
JSX
<label class="btn btn-primary" for="modal-3">Open Modal</label>
<input class="modal-state" id="modal-3" type="checkbox" />
<div class="modal">
<label class="modal-overlay"></label>
<div class="modal-content flex flex-col gap-5">
<label for="modal-3" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"></label>
<h2 class="text-xl">Modal title 3</h2>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorum voluptate ratione dicta. Maxime cupiditate, est commodi consectetur earum iure, optio, obcaecati in nulla saepe maiores nobis iste quasi alias!</span>
<div class="flex gap-3">
<button class="btn btn-error btn-block">Delete</button>
<button class="btn btn-block">Cancel</button>
</div>
</div>
</div>

API

classNameDescription
modalModal base class
modal-stateToggle to handle open and close of drawer
modal-overlayOverlay to cover the back of modal
modal-closeShow Close button of modal
modal-contentContent of drawer