• Documentation
  • /
  • Next.js Firebase
  • /
  • Modal

Modal

The Modal component is a simple wrapper around the Headless UI Dialog:

function ModalDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>

      <Modal heading="Deleting item" isOpen={isOpen} setIsOpen={setIsOpen}>
        <div className="flex flex-col space-y-4">
          <div>You are about to delete an item.</div>

          <div>Are you sure you want to continue?</div>

          <Button block color="danger">
            Yep, delete Item
          </Button>
        </div>
      </Modal>
    </>
  );
}

Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor