Component > Alerts (Ephemeral Notifications)

Alerts are more compact, ephemeral notifications that appear over the top of the users workspace and disappear automatically after a period of time.

Anatomy

Usage

Alerts should be used for time-sensitive messages to notify the user, but never in cases that require user action, as they will disappear after a period of time and reside in the notification center.

Examples:

“Your item was deleted [Undo]”
“Your changes were saved succesfully”
“The user was invited [Revoke]”

States

  • Visible (internal timer counting)

    1. Awaiting input

    2. click to pause auto-dismiss (timer paused)

    3. click optional Action link

    4. click to dismiss

  • Dismissed (not visible)

    1. Resides in notification center, marked as read.
  • Timed-out (not visible)

    1. Resides in notification centre, marked as unread.

Behaviours

The Alert appears, for example as a ‘toast’, and resides for a period of time (n seconds, to be determined), before disappearing. Hovering the alert ‘pauses’ its dismiss timer. The alert can be clicked anywhere to ‘pause’ - after which it must be dismissed manually. The text can be read and the optional action links can be clicked.

The title and body are mandatory - it should be possible for a user to derive some meaning from the notification at-a-glance, and then read more for further details.

It would be possible for product owners to configure which alerts make their way into the notification centre - for example an ephemeral alert “Saved! Your work was auto-saved” could disappear or be dismissed without making it to the notification centre - this could be configured by product owners per alert type.