---
description: The Modal component wrapper.
---

# Wrapper

{% hint style="info" %}
This is a compound component.
{% endhint %}

### API

This component extends the native [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the `className` prop is not included in the table.

| Props      | Type                | Required |
| ---------- | ------------------- | -------- |
| `children` | `ReactNode`         | ✅        |
| `isOpen`   |  `boolean`          | :x:      |
| `maxWidth` | `string`            | :x:      |
| `height`   | `string`            | :x:      |
| `onClose`  | `() => void;`       | :x:      |
| `position` | `'top' \| 'center'` | :x:      |

<details>

<summary>children</summary>

The children in this case, because it is a compound component, should be the ones provided by this design system, listed before.

</details>

<details>

<summary>isOpen</summary>

Prop that controls if the modal is being displayed or not on the interface

</details>

<details>

<summary>maxWidth</summary>

Controls the max-width property style of the card inside of the modal.

</details>

<details>

<summary>height</summary>

Controls the height property style of the card inside of the modal.

</details>

<details>

<summary>onClose</summary>

Optional prop that closes the modal by clicking outside the card, on the x button or just by pressing the Esc key.

</details>

<details>

<summary>position</summary>

Used to set a default display position, either at the top or center of the parent.

</details>
