Modal

Search…

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.

Popover

SidePanel

Last modified 2mo ago

Copy link

Outline

Usage

Demonstration

Props

Usage

Demonstration

Props

`visible`

`width`

`padding`

`onClose`

`onClosed`

`closeButton`