# Modal

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

## Usage <a href="#usage" id="usage"></a>

```jsx
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

![](/files/snezLbfmaeXoMB4IIDOM)

## Props <a href="#props" id="props"></a>

#### `visible` <a href="#visible" id="visible"></a>

| TYPE      | DEFAULT VALUE |
| --------- | ------------- |
| `Boolean` | Required      |

Use this property to show/hide the Modal.

#### `width` <a href="#width" id="width"></a>

| 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` <a href="#padding" id="padding"></a>

| 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` <a href="#onclose" id="onclose"></a>

| 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` <a href="#onclosed" id="onclosed"></a>

| TYPE       | DEFAULT VALUE |
| ---------- | ------------- |
| `Function` | None          |

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

#### `closeButton` <a href="#closebutton" id="closebutton"></a>

| TYPE      | DEFAULT VALUE |
| --------- | ------------- |
| `Boolean` | `true`        |

Whether or not to display a close button.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://legacy-docs.aragon.org/developers/tools/aragonui/overlays/modal.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.