Koffee UI 2
V0.0.1

Dialog

Dialog (also known as Modal) component only comes in 1 variant

Dialog title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis doloribus provident nobis quisquam tenetur odit omnis vero officia odio dicta?

Usage

Note: ensure Tailwind CSS has been setup
Note:
  • JavaScript is required to trigger Dialog
  • For Next JS, the "use client" directive will be required as this needs to be a client component
// Dialog referenceconst dialogRef = useRef<HTMLDialogElement>(null);// Showing the modaldialogRef?.current?.showModal();// Hiding the modaldialogRef?.current?.close();<!-- Dialog --><dialog className="kf-dialog" ref={dialogRef}>
<div className="kf-dialog-title">Dialog title</div>
<p className="mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit...</p><!-- Rest of the code -->
</dialog>
Next: Dropdown