Component > Notifications (Open)

Open

Anatomy

Semantic colour examples

Severity Border Colour
Information Grey
Warning Orange
Error Red
Success Green

Usage

The notification is used to deliver short messages and application content to the user in a timely way, and allow the user to take action directly from the notification.

Examples

“Your changes were saved successfully”
“The item was deleted [Undo]”
“A user {name} requested access to this [Approve] [Deny]”

States

  • Unread

    1. Includes a visual indicator that this notification is unread
  • Read

    1. Includes (or omits 1 a) a visual indicator that this notification is read
  • Both Unread and Read states: Awaiting input

    1. click context menu for snooze or toggle read status

    2. click optional Action link (Clicking an action also marks the notification as Read)

    3. click to dismiss

  • Dismissed

    1. Is not visible (deleted)
  • Snoozed (below)

    1. Will return to Unread state + Alert after Snooze period

Behaviours

Notifications reside in the Notification Centre where they can be scrolled in a list sorted by most recent at the top. Their optional actions can be clicked (marking them as read).

The Notification context menu allows it to be snoozed or marked as Read/Unread. Each notification has a colour code which corresponds to its severity level (info, warn, success, error).

The Notification width is fixed to that of its container (the Notification Centre) but its height can expand to a defined maximum to contain a longer line of body text than just 1 or 2 lines.

A notification can expand to contain all the text of the notification body when in the notification centre. A alert (above) will always truncate a long text string, while a notification will always display the full text - it’s important that notification copy is kept to a sensible length.