# Modal Props (свойства) для компонента Modal: [{"name":"isOpen","type":{"name":"boolean"}},{"name":"opened","type":{"name":"boolean"}},{"name":"withBlur","type":{"name":"boolean"}},{"name":"closeOnEsc","type":{"name":"boolean"}},{"name":"closeOnOverlayClick","type":{"name":"boolean"}},{"name":"onEscKeyDown","type":{"name":"((event: KeyboardEvent) => void)"}},{"name":"onOverlayClick","type":{"name":"((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)"}},{"name":"initialFocusRef","type":{"name":"RefObject<HTMLElement>"}},{"name":"focusAfterRef","type":{"name":"RefObject<HTMLElement>"}},{"name":"children","type":{"name":"ReactNode"}},{"name":"onClose","type":{"name":"(() => void)"}},{"name":"closeButtonAriaLabel","type":{"name":"string"}},{"name":"showCloseButton","type":{"name":"boolean"}}] ## Использование ### Провайдер контекста Поместите  `ModalsProvider`  в  корень приложения  или там, где будете применять модальные окна:
```tsx
import ReactDOM from 'react-dom';
import { ModalsProvider } from '@salutejs/plasma-web';
import { App } from './App';
ReactDOM.render(
<ModalsProvider>
<App />
</ModalsProvider>,
document.getElementById('root')
);
```
### Вызов модального окна После подключения  `ModalsProvider`  поместите компонент  `Modal`  туда, где необходимо применить модальное окно: 
```tsx
import React from 'react';
import { Modal, Headline3, P1, Button } from '@salutejs/plasma-web';
export function App() {
const [isOpen, setIsOpen] = React.useState(false);
const close = React.useCallback(() => {
setIsOpen(false);
});
return (
<div>
<Button text="Открыть модальное окно" onClick={() => setIsOpen(!isOpen)} />
<Modal opened={isOpen} onClose={close}>
<Headline3 mb={10}>Модальное окно</Headline3>
<P1>Содержимое модального окна.</P1>
<Button text="Закрыть" onClick={close} />
</Modal>
</div>
);
}
```