Modal

The Modal component is used to render a structured container for modal windows.

Usage

import { Modal, Button } from '@aragon/ui'

const App = () => {
  const [opened, setOpened] = useState(false)

  const open = () => setOpened(true)
  const close = () => setOpened(false)

  return (
    <>
      <Button onClick={open}>Open modal</Button>
      <Modal visible={opened} onClose={close}>
        {/* modal content */}
      </Modal>
    </>
  )
}

Demonstration

Props

visible

TYPE	DEFAULT VALUE
Boolean	Required

Use this property to show/hide the Modal.

width

TYPE	DEFAULT VALUE
Function, Number or String	viewport => Math.min(viewport.width - 48, 600)

Use this property to assign a dynamic width to the modal.

If a function is set, the data coming from Viewport will be passed to it.

If a number is set or returned from the function, px will automatically be added to it.

padding

TYPE	DEFAULT VALUE
Function, Number or String	24

The inner padding of the modal.

If a function is set, the data coming from Viewport will be passed to it.

If a number is set or returned from the function, px will automatically be added to it.

onClose

TYPE	DEFAULT VALUE
Function	None

This callback is called when the ESC key is pressed or the user clicks outside of the modal container.

onClosed

TYPE	DEFAULT VALUE
Function	None

This callback is called after the closing transition has completed and the content has been unmounted.

closeButton

TYPE	DEFAULT VALUE
Boolean	true

Whether or not to display a close button.