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.
Last modified 2mo ago
Copy link
Outline
Usage
Demonstration
Props