Overview

Overlays are components which sit at levels higher than the page content and display a dialog box of focused content.

They exist to focus the user into something related to the page or process they are working on within the context of that page.

Key Points

• Overlays are displayed over the top of all other content as they are displayed at the highest level
• The background overlay blocks out interaction with any content below unless it is dismissed
• Modals have restricted usage whereas an overlay dialogue can contain custom content at various sizes
• Modals have a fixed heading size as they are intended for uniform messages
• Overlays have headings with responsive typography as their titles can vary

Usage

Both components in this family should be used when a secondary content or information is required to be displayed in relation to a page or process.

When displayed these components focus the user on additional information or requesting a decision, until they manually dismiss the component.

Both of these components should be triggered by a user tapping on a control so they are aware of the context of the launching screen.

File Links