Components

Modals and overlays

Modals are used when a user needs to be prompted to complete a task before continuing their work. They provide a simplified interface in context with the screen from where they are launched. Use a modal dialog if you are showing a large amount of information, or need to perform a discrete action.

Overlays should be used when the user needs to provide more detail within a form but without requiring a stoppage of all other work. Use an overlay if you are showing a small amount of read-only information, or contextual information for a specific item.

Last updated: Mar 2017

Modal dialog

Modal dialogs can be launched from a grid, link or button. They are used to segment information from the main action area. If the user is doing an action that is wholly contained and does not need to reference other information on the screen, a modal dialog can be a good choice.

The modal dialog can also be used to show one-time-use information, such as expanding upon a help topic or showing additional data about an item on screen. However, this information should be such that it doesn't need to be referenced when doing the necessary work on screen. In that case, it should expand on-screen so that it can be used.

Modal dialog example

Last updated: Mar 2017

Overlays

Overlays are used to display additional information about an item. They can be launched by clicking or hovering on a link or icon. However, launching by clicking is preferred as it is more accessible. Overlays are read-only, and users can review the data enclosed, but not do actions.

Overlay example

Last updated: Mar 2017

Next: Buttons and links