Renders Modal

Usage:

import { Modal, ModalProps, ModalInline } from '@admin-bro/design-system'

Modal can be rendered either inline or as a regular Modal.

Inline usage

  <ModalInline {...modalProps} />

Modal usage

const [isVisible, setIsVisible] = useState(false)
modalProps = {
  /** ... **/
  onOverlayClick: () => setIsVisible(false),
  onClose: () => setIsVisible(false),
}

<Box>
  <Label>Modal Trigger</Label>
  <Button
    onClick={() => setIsVisible(!isVisible)}
  >
    Toggle Modal
  </Button>
  {isVisible && <Modal {...modalProps} />}
</Box>

Passing content

You can also pass the values in 2 ways:

1. by using just the ModalProps - as shown in the previous examples.
2. by using the Children

Playground

Let me show you 3 live examples of using the Modal component:

Passing children

The most versatile way, but, the one, which requires you to "design" the modal

Passing props

You have everything out of the box

Real modal

Handling modal visibility with the useState hook.