Design Guidelines

Patterns

Deliver productive and engaging notifications with one or more of these patterns.

A variety of examples of notification types on a blueprint style background.

Notification Landscape

A linear spectrum showing notification types in order of most discreet to most urgent: From the left, Notification Badge & tray is most discreet, followed by Alert, Scoped Notification, Notification Tile, Docked Composer, Modal/Prompt, and Welcome Mat on the right as most urgent.
The notification landscape from most discreet to most urgent

Bell and Accompanying Notification Tray

Level of Priority

Urgent, standard, and discreet delivery

Description

Clicking the bell expands and collapses the notification tray. When a new notification is delivered, an enumerated badge appears, and the count of new notifications is updated. Each notification in the tray allows the user to navigate directly to the respective item.

Component Blueprint

Stateful Button Icon (Bell)
Popover (dialog with list of notifications)

 A wireframe showing an example of a bell and accompanying notification tray.
A bell icon and notification tray

Notification Tile

Level of Priority

Standard delivery

Description

Clicking in the body of a notification tile dismisses the tile and prompts a new browser tab with its URL loaded. The tile can also be dismissed by clicking the X icon.

Component Blueprint

Stateful Button Icon (Bell)
Popover (dialog with list of notifications)

A wireframe showing an example of two notification tiles open in the upper right corner of the page.
Another example of a notification: Notification tiles.

Docked Assistant

Level of Priority

Urgent delivery

Description

The Docked Composer can be expanded into a docked assistant notification, enabling the user to complete tasks or gather information via chat, dialer, or email. The notification can be minimized and docked at the bottom of console by clicking the minimize icon.

Component Blueprint

Docked Composer (for persistent UI elements)

A wireframe showing an example of docked assistant in the bottom right corner. The docked assistant displays a chat interface.
A docked assistant

Modal/Prompt

Level of Priority

Urgent delivery

Description

Modals and prompts display information in a layer above the app. They're centered vertically within the viewport. To dismiss a prompt, the user must confirm its call to action. To dismiss a modal, the user can select the close icon or cancel button, or click anywhere outside the dialog window.

Component Blueprint

Modal
Prompt

A wireframe showing an example of a modal, it is centered in the web page
A modal

Welcome Mat

Level of Priority

Urgent delivery

Description

Like a modal, a welcome mat displays information in a layer above the app. Used mostly for educational content, it usually includes an informational left-hand pane and an actionable right-hand pane. Welcome mats may trigger walkthroughs, other modals, or videos, or direct users to URLs.

Component Blueprint

Welcome Mat

A wireframe showing an example of a welcome mat. The welcome mat is centered on the page.
A welcome mat

Alert Banner

Level of Priority

Standard delivery

Description

Alert banners appear without user initiation, communicating system- or page-wide states, and persisting throughout a session.

Component Blueprint

Alert

A wireframe showing an example of an alert banner positioned at the top of the page, above the header.
An alert banner

Scoped Notification

Level of Priority

Discreet delivery

Description

Scoped notifications present information not important enough to justify alerts. They can be scoped to most containers and are not dismissible.

Component Blueprint

Scoped Notification

A wireframe showing an example of a scoped notification.
A scoped notification