Dialog (modal)1

Headless UI now includes a robust dialog implementation you can use to build traditional modal dialogs, mobile slide-out menus, or any other take-over-style UI that needs to capture the focus of the entire page.

    <DisclosureButton> Is team pricing available? </DisclosureButton>
      Yes! You can purchase a license that you can share with your entire team.

  import {
  } from "@headlessui/vue";

  export default {
    components: { Disclosure, DisclosureButton, DisclosurePanel },
import { useState } from "react1";
import { Dialog } from "@headlessui/react";

function MyDialog() {
  let [isOpen, setIsOpen] = useState(true);

  return (
    <Dialog open={isOpen} onClose={setIsOpen}>
      <Dialog.Overlay />

      <Dialog.Title>Deactivate account</Dialog.Title>
        This will permanently deactivate your account

        Are you sure you want to deactivate your account? All of your data will
        be permanently removed. This action cannot be undone.

      <button onClick={() => setIsOpen(false)}>Deactivate</button>
      <button onClick={() => setIsOpen(false)}>Cancel</button>