modal

Import

import {
  Modal,
  ModalDialog,
  ModalDialogHeader,
  ModalDialogBody,
  ModalDialogFooter,
} from '@xpanseinc/nebula'

Usage

export const ExampleDialog = () => {
  const [isOpen, setIsOpen] = useState(false)
  const onClose = () => {
    setIsOpen(false)
  }
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open modal</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalDialog>
          <ModalDialogHeader>Modal title</ModalDialogHeader>
          <ModalDialogBody>
            <div
              css={theme => ({
                padding: '16px 24px',
                ...theme.typography.header.sm.light,
              })}
            >
              Sit nulla est ex deserunt exercitation anim occaecat. Nostrud
              ullamco deserunt aute id consequat veniam incididunt duis in sint
              irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit
              officia tempor esse quis. Sunt ad dolore quis aute consequat.
              Magna exercitation reprehenderit magna aute tempor cupidatat
              consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
              incididunt cillum quis. Velit duis sit officia eiusmod Lorem
              aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
              consectetur esse laborum eiusmod pariatur proident.
            </div>
          </ModalDialogBody>
          <ModalDialogFooter>
            <Button onClick={() => onClose()}>Close</Button>
          </ModalDialogFooter>
        </ModalDialog>
      </Modal>
    </>
  )
}

<ExampleDialog />

Sizes

Use the size prop to adjust the width of the dialog. Values can be sm, md, lg.

export const ExampleDialog = ({ size, children }) => {
  const [isOpen, setIsOpen] = useState(false)
  const onClose = () => {
    setIsOpen(false)
  }
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open {size} modal</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalDialog size={size}>
          <ModalDialogHeader>Modal title</ModalDialogHeader>
          <ModalDialogBody>
            <div
              css={theme => ({
                padding: '16px 24px',
                ...theme.typography.header.sm.light,
              })}
            >
              Sit nulla est ex deserunt exercitation anim occaecat. Nostrud
              ullamco deserunt aute id consequat veniam incididunt duis in sint
              irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit
              officia tempor esse quis. Sunt ad dolore quis aute consequat.
              Magna exercitation reprehenderit magna aute tempor cupidatat
              consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
              incididunt cillum quis. Velit duis sit officia eiusmod Lorem
              aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
              consectetur esse laborum eiusmod pariatur proident.
            </div>
          </ModalDialogBody>
          <ModalDialogFooter>
            <Button onClick={() => onClose()}>Close</Button>
          </ModalDialogFooter>
        </ModalDialog>
      </Modal>
    </>
  )
}

<HStack spacing={16}>
  <ExampleDialog size="sm" />

  <ExampleDialog size="md" />

  <ExampleDialog size="lg" />
</HStack>