Develop ultra fast with Prismane 🎉
Logo
Quick Search...

Modal

Modal displays a container that displays a notification.
Category: Overlay Source

Import

 
import { Modal } from "@prismane/core";

Modal component has the following inner components:

  • - Modal.Header - The header container for the modal.
  • - Modal.Footer - The footer container for the modal.

Usage

 
function Default() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Modal open={open} onClose={() => setOpen(false)} closable>
        <Text cl="white">This is a simple modal</Text>
      </Modal>
      <Button
        onClick={() => {
          setOpen(!open);
        }}
      >
        Toggle Modal
      </Button>
    </>
  );
}

Complex Modal

When provided a Modal.Header, if the Modal is closable, then a close button is displayed, which can be used to close the dialog.

function Default() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Modal w={fr(144)} open={open} onClose={() => setOpen(false)} closable>
        <Modal.Header>
          <Text
            fw="bold"
            fs="3xl"
            cl={(theme) =>
              theme.mode === "dark" ? ["base", 300] : ["base", 900]
            }
          >
            Account warning
          </Text>
        </Modal.Header>
        <Text
          fs="sm"
          cl={(theme) =>
            theme.mode === "dark" ? ["base", 300] : ["base", 900]
          }
        >
          Your account has not been completed yet.
        </Text>
        <Modal.Footer>
          <Button>Complete</Button>
        </Modal.Footer>
      </Modal>
      <Button
        onClick={() => {
          setOpen(!open);
        }}
      >
        Toggle Modal
      </Button>
    </>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

Go BackMenu
Up NextNativeDateField