Renders Modal
### Usage:
```javascript
import { Modal, ModalProps, ModalInline } from '@adminjs/design-system'
```
Modal can be rendered either inline or as a regular Modal.
#### Inline usage
```jsx
```
#### Modal usage
```jsx
const [isVisible, setIsVisible] = useState(false)
modalProps = {
/** ... **/
onOverlayClick: () => setIsVisible(false),
onClose: () => setIsVisible(false),
}
{isVisible && }
```
### Passing content
You can also pass the values in 2 ways:
1. by using just the {@link ModalProps} - as shown in the previous examples.
2. by using the **Children**
### Playground
Let me show you 3 live examples of using the Modal component:
#### Passing children
The most versatile way, but, the one, which requires you to "design" the modal
```reactComponent
return (
I am header
I am info text
)
```
#### Passing props
You have everything out of the box
```reactComponent
const variant = 'danger'
const modalProps = {
label: 'Someone broke your car',
icon: 'Car',
title: 'Behold',
variant,
subTitle: 'Something wrong is happening!!!',
buttons: [
{ label: 'Cancel' },
{ label: 'Delete', variant },
],
}
return (
)
```
#### Real modal
Handling modal visibility with the `useState` hook.
```reactComponent
const Wrapper = () => {
const [isVisible, setIsVisible] = React.useState(false)
const variant = 'success'
const modalProps = {
label: 'Your car is 100% fine',
icon: 'Car',
title: 'It is ok',
variant,
subTitle: 'Something wrong is NOT happening!!!',
buttons: [
{ label: 'Cancel' },
{ label: 'Delete', variant },
],
onOverlayClick: () => setIsVisible(false),
onClose: () => setIsVisible(false),
}
return (
{isVisible && }
)
}
return
```
Renders Modal
### Usage:
```javascript
import { Modal, ModalProps, ModalInline } from '@adminjs/design-system'
```
Modal can be rendered either inline or as a regular Modal.
#### Inline usage
```jsx