Modal

Storybook

Modal components display content in a layer above the main application. They temporarily interrupt the user's workflow to show important information, collect input, or confirm actions while keeping the context of the underlying page.

To implement Modal component into your project you'll need to add the import:

import { Modal } from "@shoptet/ui";

After adding import into your project you can use it simply like:

const { onClose, isOpen, openModal } = useModal();
return (
  <>
    <Button onClick={openModal}>Open modal</Button>
    <Modal {...args} onClose={onClose} isOpen={isOpen}>
      <Modal.Header subheader="Subtitle">Basic Modal</Modal.Header>
      <Modal.Content>
        <Paragraph>
          This is a content of this modal. It can be text or whatever else.
        </Paragraph>
      </Modal.Content>
      <Modal.Footer>
        {({ secondaryButtonProps, actionButtonProps }) => (
          <>
            <Button {...secondaryButtonProps} onClick={onClose}>
              Cancel
            </Button>
            <Button {...actionButtonProps} onClick={onClose}>
              Save & Exit
            </Button>
          </>
        )}
      </Modal.Footer>
    </Modal>
  </>
);