Component > ‘Blocking’ or ‘Modal’ Alerts

Blocking Alerts are full-width, modal notification alerts that cannot be dismissed, and do not require interaction with the app to continue - the alert must be interacted with to remedy the situation and allow the user to proceed.

Anatomy

Usage

Because these alerts cannot be dismissed, the user is required to take an action before they can continue. The use cases for this kind of alert are quite specific and they should only be used if the user cannot progress without taking an action to prevent a degraded experience.

Examples
“Your session has expired, please sign in again. [Sign in]”
“No working internet connection, please wait or reload. [Reload]”
“The application has been updated, please reload to use the latest version. [Reload]”

States

  • Visible (internal timer counting)

    1. Awaiting input

    2. Click mandatory action link (reload, sign-in, try again, etc)

Behaviours

The Alert appears full width pinned to the top of the view. It has a mandatory action which will remedy the alert.