Modal

Modals are used to display content on top of an overlay, de-emphasizing the page content behind it. They are ideal for focusing the user's attention on a critical task or piece of information.

Props

Prop	Type	Description
isOpen	boolean	Controls whether the modal is visible.
onClose	function	Function to call when the modal requests to be closed.
title	string	The title displayed in the modal's header.
children	ReactNode	The content to display inside the modal body.

Example

Basic Modal

Click the button to open the modal. Built with Headless UI for accessibility and state management.

import { useState } from 'react';
import Modal from '@/components/Modal';
import Button from '@/components/Button';

export default function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  function closeModal() {
    setIsOpen(false);
  }

  function openModal() {
    setIsOpen(true);
  }

  return (
    <>
      <Button onClick={openModal}>Open Modal</Button>
      
      <Modal isOpen={isOpen} onClose={closeModal} title="Payment Successful">
        <p className="text-sm text-slate-500">
          Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order.
        </p>
        <div className="mt-4">
          <Button onClick={closeModal} variant="primary">
            Got it, thanks!
          </Button>
        </div>
      </Modal>
    </>
  );
}