Mobile pop-up | Horizon Design System

Overview

Release version
Australia
Available sinceYokohama
A11Y WCAG 2.1 AA

A mobile pop-up is a window that appears on top of the main content in a user interface. Pop-ups can serve various purposes, such as to relay information to the user and to provide conditional “call to action” messages. Pop-ups are flexible and customizable in terms of their content and design, and can be triggered either when a user logs in to an area or after a button tap.

Mobile pop-up documentation

Implementation and administration guides

When to use

Use mobile pop-ups to share important, time-sensitive, or contextual information with users - such as disclaimers, announcements, or confirmations before key actions. They’re ideal for drawing attention to content that requires acknowledgment or immediate response.

When not to use

Avoid using pop-ups for non-critical or routine information that could interrupt the user experience. Overusing pop-ups can lead to user frustration or message fatigue.

Use cases for using mobile pop-ups

Disclaimer acknowledgment: Pop-ups may be used to ensure that users acknowledge and accept disclaimers or warnings. For example, presenting end-users with Terms and Conditions and requesting their consent.
Time-sensitive information: Pop-ups can display time-sensitive information, like a flash sale notifications or event reminders. For example, information about campaigns, company news and announcements, “What’s new” on their application, or information about the site they are currently visiting.
Actions Confirmations: Pop-ups may be used to handle cases where the user might need to confirm an action if a specific condition is met. For example, display a pop-up to a user stating that they have accepted a new task with an estimated 3 hours of work, but their work shift is due to end in an hour.