PageModal

PageModals are a variant form of Modal designed for larger content. They are intended for contexts involving extensive information, complex tasks, or substantial workflows. The content behind a PageModal dialog is inert, meaning that users cannot interact with it.

View source code

Basic usage

const Demo = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button
        variant="primaryBrand"
        text="Open the modal"
        onClick={() => setIsOpen(true)}
      />
      <PageModal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <div>
          <p>This is a page modal.</p>
        </div>
      </PageModal>
    </>
  );
};