Inputs & Textarea
Pull to Refresh
React Grid Layout
A modal dialog displays critical content on top of the page in a separate container and requires user action.
The header can have two variations – title only or title with subtitle.
The footer can vary depending on the number of actions that need to be shown to the user.
A modal is always centered horizontally within the viewport and has two options for vertical alignment – top or centered.
A transparent overlay separates the page and the modal.
A modal can be set to have a scrollable inner content container. The inner scrollbar will only appear if the content extends beyond the viewable area. The modal outer container is set to have a maximum height equal to 80% of the viewport. The footer is always anchored to the bottom of the outer container to ensure that the action buttons are always accessible.
A modal can be set to be either dismissible or non-dismissible. Dismissible modals allow the user to close the modal and return to their prior page by clicking anywhere outside the modal or by clicking the close icon. Non-dismissible modals do not allow the user to close the modal without explicitly selecting one of the action buttons shown in the footer.
The modal outer framework is built to scale across all breakpoints. If a modal contains complex inner content such as a form, that content should also be optimized across all supported breakpoints.
Modal is available in three sizes — large, medium, and small.
Below are some examples showing the types of content that could populate the inner content container of a modal.