Modal Dialog

Modals communicate additional information through the use of an overlaid window, allowing users to remain in the context of their workflow. Modals are used to work with large amounts of data that would typically need a new page to complete. They are great for Forms since they focus the user on the new task without switching context from the current page.

Modals are dismissable by default, meaning they will render with a close action in the top right. They can also be closed via the Esc key, or by clicking anywhere outside of the Modal. You can prevent this behavior by overwriting the dismissable prop in the Modal Options provided to the create function described below.

To construct a Modal, you must first capture the ModalManagerContext. This will provide a create function that accepts your rendered Modal component as its first argument. This function can also take a set of Modal props, or custom props, as a second argument, and a set of Modal Options that help control the Modal's behavior as its third argument.

For more information on the create function, as well as the available Modal Options it can accept, refer to the Props Table section.

If you would like to manage change events, the ModalContext provides an update prop. This function accepts a set of Modal props that will replace the existing ones.

If you would like to make an update from the parent of the Modal, you can do so by capturing the set of Modal Methods that are returned from the create function.

If you would like to manage validation, pass the alert prop to the Modal Options of the create function. This will render the provided Modal component as an alert. Alerts may not be dismissed except for by an explicit action within the Modal.

The alert version of the Modal component is a prompt that requires the user to take an action, and unlike the normal Modal component, they are non-dismissible with a Close button in the top corner. The typical alert Modal component contains 2 (max 3) possible actions.

Modals can be minimized to be re-opened at any point by passing the minimizable prop to the Modal Options within the create function. When minimized, the Modal heading will appear in the bottom right of the viewport. From here, the Modal can either be closed, or re-opened by clicking on the heading.