Structured modals are the standard modal component used for confirmations, detail overlays, settings, and more.

‍

Types

Main

For displaying very wide, unfixed, scrollable content.

Info

For displaying confirmations, alerts, and informational messages.

Sidebar

For displaying narrow, unfixed, scrollable content, while maintaining visibility of the right-hand page column.

‍

Alternatives

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.

2. Title

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.

3. Subtitle

This is an optional field to provide more context around the modal body content.

4. Body

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.

Triggering

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.

Dismissal

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.

Scrolling

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.

‍