Modal

import

import { Modal, ModalContent, ModalOverlay } from '@bone-ui/modal'

Basic

Loading...

function ModalDemo() { const { isOpen, close, open } = useDisclosure() return ( <Box p2> <Modal isOpen={isOpen} onClose={close}> <ModalOverlay></ModalOverlay> <ModalContent> <Box p4 spaceY4> <Box text2XL fontBold> Modal title </Box> <Box> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum. </Box> <Button onClick={close}>close</Button> </Box> </ModalContent> </Modal> <Button onClick={open}>Open modal</Button> </Box> ) }

function ModalDemo() {
  const { isOpen, close, open } = useDisclosure()

  return (
    <Box p2>
      <Modal isOpen={isOpen} onClose={close}>
        <ModalOverlay></ModalOverlay>
        <ModalContent>
          <Box p4 spaceY4>
            <Box text2XL fontBold>
              Modal title
            </Box>
            <Box>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus
              eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum
              quis sed voluptatum quae eum fugit earum.
            </Box>
            <Button onClick={close}>close</Button>
          </Box>
        </ModalContent>
      </Modal>

      <Button onClick={open}>Open modal</Button>
    </Box>
  )
}

LIVE DEMO

Sizes

Loading...

<Box toCenterY spaceX4> <Tag size="sm">Small</Tag> <Tag size="md">Middle</Tag> <Tag size="lg">Large</Tag> <Tag size={48}>Size 48</Tag> <Tag size={64}>Size 64</Tag> </Box>

<Box toCenterY spaceX4>
  <Tag size="sm">Small</Tag>
  <Tag size="md">Middle</Tag>
  <Tag size="lg">Large</Tag>
  <Tag size={48}>Size 48</Tag>
  <Tag size={64}>Size 64</Tag>
</Box>

LIVE DEMO