Using this Component
Structured modals are the standard modal component used for confirmations, detail overlays, settings, and more.
For displaying very wide, unfixed, scrollable content.
For displaying confirmations, alerts, and informational messages.
For displaying narrow, unfixed, scrollable content, while maintaining visibility of the right-hand page column.
Modals are highly flexible components, but they should be used sparingly. When possible, use inline content, and view controllers (e.g. tabs), and flexible wells (e.g. UIWell, UIAccordion) in place of modals.
1. Modal Header
The modal header is reserved for contextual information about the modal content and context. Scrollable body content scrolls beneath the modal header. The modal header is always visible.
This is the primary label on all modals, and should succinctly and accurately reflect the modal content. If the modal presents a decision to the user, the title and actions should convey the crux of the question being asked.
This is an optional field to provide more context around the modal body content.
The body is a flexible area that can display whatever content is necessary for the modal’s desired feature. It may be as simple as a UITextBlock or as complex as a an interactive UIPlatformTable.
5. Modal Footer
The modal footer is present on all modals primarily to contain an action area. Scrollable body content scrolls beneath the modal footer. The modal footer is always visible.
6. Action Area
All modals must an action area with exactly one primary UIButton. All action areas must contain at least one UIButton that performs no action and returns the user to the prior screen. The action area is right-aligned within the modal footer.
7. Background Shader
When modals appear, there is also a translucent dark modal shader that partially occludes the page content visible around the modal. This shader helps draw attention to the modal. Depending on the significance of the modal content, and the relevance of the visible surrounding page content, this shader can be made more or less transparent to suit the context.
Modals perform a variety of functions depending on their context. Their basic behavior is to appear as an overlay above other page content, and then be dismissed based on a user’s actions.
Modals may be triggered by a variety of deliberate or incidental actions on a page. Actions within a modal should never trigger another modal to open.
Modals must be dismissed with one or all of the buttons within the modal footer. Usually modals may be dismissed by clicking outside the bounds of the modal. This may be disabled if the modal contains a critical decision that a user must make before proceeding or returning to their prior screen.
When there is more content than can be displayed at one time, modals may be made scrollable. Content should scroll beneath the modal’s header and footer. Modals with long, scrollable content should be used sparingly.