# Code ## Props

Props	Data Type	Required
children	-HTML tags -Custom Components (ModalBody, ModalFooter)	✅
className	string	❌
commland	boolean	❌
title	string	❌
show	boolean	❌
cancelAction	Function	❌

{% hint style="info" %} commland prop is used to adjust the Alert component to the Commland UI-Shell automatically. {% endhint %} ### Where to Insert This Component? This component is supposed to overlay all the content inside the application. Knowing that it can be inserted wherever the developer wants, it should not be affected by the rest of content structure. To keep a better order, it is recommended to insert this component at the beginning or at the end of the HTML structure in the React componen. ### CancelAction This is a prop made to allow to users the action of canceling or closing a modal at pressing the Esc key, clicking on the exit button or in the overlayed backgorund. If this prop is not facilitated by the developers, then the modal is going to be blocked, forcing the users to interact only with the Buttons in the Modal footer to close the modal. ### Children To generate the structure required for the component, the developer is able to insert the following components as children elements: #### ModalBody In here, the developer can insert all the HTML tags and Components needed.

Props	Data Type	Required
children	HTML tags and Custom Components	✅
className	string	❌
paddingDisabled	boolean	❌

{% hint style="info" %} paddingDisabled prop removes the default padding applied to the ModalBody. This can be useful when the internal structure of the modal is using its own column system or if it requires something more customized. {% endhint %} #### ModalFooter

Props	Data Type	Required
children	SDS Button Components	✅

#### Example ```tsx import React, {useState} from 'react'; import { Modal, ModalBody, ModalFooter, Text, Button} from '@2600hz/sds-react-components'; const Example = ()=>{ //STATE const [show, setShow] = useState(false); //ACTIONS const closeModal = ()=>{ setShow(false); } const openModal = ()=>{ setShow(true); } const customAction = ()=>{ console.log('Do something'); closeModal(); } //CONTENT return( <> Some random text...

) } ``` ## Components Dependency For this component elaboration there were used the following internal components: * ModalBody * ModalFooter * [Telicon](https://2600hz.gitbook.io/sds/sds-components/simple-components/telicon) * [Button](https://2600hz.gitbook.io/sds/sds-components/simple-components/button) ## Live Demo For detailed code usage documentation, see the Storybooks for each framework below. ### React {% embed url="" %}