The Modal should only contain content or flows which are related to the current page and not replace pages, therefore its complexity level has to be simple. Consider the fullscreen state if you want to focus the users attention to the modal content.
Modal is responsive per default but the width can be adjusted (the default is 600px or 37.5rem). Content on the modal is scrollable and has a space5 bounding box.
The following contains a simple example, with a resulting modal similar to the live examples above.
booleanShow the modal covering the whole page to focus the users attention.
booleanMakes the modal dismissible by the user.
() => voidA function that will be called after the user has dismissed the modal and the modal has disappeared.
The Modal supports width styled-system props.
Modal provides a function to dismiss the component with an animation. The
dismiss function is available either through render props or a hook. After the
animation has finished the
onClose callback will be called.