Notification

Planned

Notifications are medium-emphasis messages used to communicate contextual information from the system to the user.

Notification

Anatomy

The essential parts of any notification are the surface that contains the content, the message itself, iconography used to aid the user in determining message severity, and color — also used to help the user quickly assess severity. All other elements are optional. Notifications come in three variants: toast, inline and banner.

Toast notifications

Toast notifications are raised above the surface and can appear in front of other content. 

  1. Raised surface
  1. Leading icon — Avatar (optional)
  2. Heading — Subtitle 2 (optional)
  3. Messaging copy — Body 2
  4. Close affordance — Quick action button (optional)
  5. CTA — Low emphasis button (optional up to two)
  6. Timeout indicator (optional)

Inline notifications

Inline notifications appear within context and push lower content down to make room for itself. 

  1. Resting surface
  2. Leading icon — Avatar (optional)
  3. Heading — Subtitle 2 (optional)
  4. Messaging — Body 2
  5. Close affordance — Quick action button (optional)
  6. Timeout indicator (optional)

Banner notifications

Banner notifications appear at the top of the experience and indicate a system-wide message for the users benefit.

  1. Leading icon — Avatar (optional)
  2. Heading — Subtitle 2 (optional)
  3. Messaging — Body 2
  4. Resting surface
  5. Close affordance — Quick action button (optional)

Specs

There are four main areas of specifications for the notification component: color, elevation, min/max and spacing.

Color (dark)


Element Property Value
Container (info) Background color ∆colorBrandedInfo
Timeout bar (info) Background color ∆colorBrandedInfoTimeout
Icon (info) Icon color ∆colorPlatformWhite
Copy (info) Text color colorPlatformWhite
Close affordance (info) Background color Transparent/None
Close affordance (info)(hover) Background color ∆colorPlatformAlpha50
Close affordance (info) Icon color ∆colorPlatformWhite
Container (caution) Background color ∆colorBrandedCaution
Timeout bar (caution) Background color ∆colorBrandedCautionTimeout
Icon (caution) Icon color ∆colorPlatformWhite
Copy (caution) Text color ∆colorPlatformWhite
Close affordance (caution) Background color Transparent/None
Close affordance (caution)(hover) Background color ∆colorPlatformAlpha50
Close affordance (caution) Icon color ∆colorPlatformWhite
Container (error) Background color ∆colorBrandedError
Timeout bar (error) Background color ∆colorBrandedErrorTimeout
Icon (error) Icon color ∆colorPlatformWhite
Copy (error) Text color ∆colorPlatformWhite
Close affordance (error) Background color Transparent/None
Close affordance (error)(hover) Background color ∆colorPlatformAlpha50
Close affordance (error) Icon color ∆colorPlatformWhite
Container (success) Background color ∆colorBrandedSuccess
Timeout bar (success) Background color ∆colorBrandedSuccessTimeout
Icon (success) Icon color ∆colorPlatformWhite
Copy (success) Text color ∆colorPlatformWhite
Close affordance (success) Background color Transparent/None
Close affordance (success)(hover) Background color ∆colorPlatformAlpha50
Close affordance (success) Icon color ∆colorPlatformWhite
Container (banner) Background color ∆colorBrandedBulletin
Icon (banner) Icon color ∆colorPlatformWhite
Copy (banner) Text color ∆colorPlatformWhite

Color (light)

Element Property Value
Container (info) Background color ∆colorBrandedInfoLight
Timeout bar (info) Background color ∆colorBrandedInfoTimeoutLight
Icon (info) Icon color ∆colorBrandedInfo
Copy (info) Text color ∆colorPlatformGray900
Close affordance (info) Background color Transparent/None
Close affordance (info)(hover) Background color ∆colorBrandedInfoTimeoutLight
Close affordance (info) Icon color ∆colorPlatformGray900
Container (caution) Background color ∆colorBrandedCautionLight
Timeout bar (caution) Background color ∆colorBrandedCautionTimeoutLight
Icon (caution) Icon color ∆colorBrandedCaution
Copy (caution) Text color ∆colorPlatformGray900
Close affordance (caution) Background color Transparent/None
Close affordance (caution)(hover) Background color ∆colorBrandedCautionTimeoutLight
Close affordance (caution) Icon color ∆colorPlatformGray900
Container (error) Background color ∆colorBrandedErrorLight
Timeout bar (error) Background color ∆colorBrandedErrorTimeoutLight
Icon (error) Icon color ∆colorBrandedError
Copy (error) Text color ∆colorPlatformGray900
Close affordance (error) Background color Transparent/None
Close affordance (error)(hover) Background color ∆colorBrandedErrorTimeoutLight
Close affordance (error) Icon color ∆colorPlatformGray900
Container (success) Background color ∆colorBrandedSuccessLight
Timeout bar (success) Background color ∆colorBrandedSuccessTimeoutLight
Icon (success) Icon color ∆colorBrandedSuccess
Copy (success) Text color ∆colorPlatformGray900
Close affordance (success) Background color Transparent/None
Close affordance (success)(hover) Background color ∆colorBrandedSuccessTimeoutLight
Close affordance (success) Icon color ∆colorPlatformGray900

Elevation

Element Property Value
Surface Shadow Y-offset ∆surfacePlatformRaisedShadowY
Surface Shadow opacity ∆surfacePlatformRaisedOpacity
Surface Shadow spread ∆surfacePlatformRaisedSpread
Surface Shadow blur ∆surfacePlatformRaisedBlurResting

Min/Max

In most cases the notification component will respond to the width of its parent container, so no firm min/max definitions are needed; but, when using the toast variant with the anchored placement the max width is 688px (600px max for Body 2 metering limit in addition to all the padding and margin of atoms and molecules contained within the component.

Content spacing

Button spacing

When the buttons are displayed, the buttons container sits directly on top of the timeout bar, and directly below the content container.

Timeout bar spacing

The timeout bar, when displayed, increases the notification component height by 4px, and is positioned directly against the bottom of the parent container. 


States

The only states consideration for the notification component is the treatment of the quick action button (used as a close affordance). When hovering on the close affordance, the background changes from transparent to the timeout bar color. Low emphasis buttons used within the notification component follow all the normal states outlined in the buttons component docs.

Theming

Color

Generally speaking, the colors used for notifications should not be themed unless branded colors could make the error and/or warning colors blend in. For example, if a brands colors are red, it would be a good idea to theme the error colors to stand out a bit more from the other branded elements on screen. 

Users already have mental models of what certain colors mean, and we shouldn’t break those (red = bad, green = good, etc.), but if subtle changes need to take place to increase the visual dominance for notifications, the following token values can be themed.

Element Property Value
∆colorBrandedBulletin #333333 Needs to maintain a 4.5:1 color contrast ratio when white is placed on top
∆colorBrandedInfo #0267C1 Needs to maintain a 4.5:1 color contrast ratio when white is placed on top
∆colorBrandedInfoTimeout #025197 Needs to maintain a similar darkness value to the default color. This color is used not only for the timeout indicator, but also for a hover state on the quick action button used for the close affordance.
∆colorBrandedInfoLight #F2F7FC Needs to maintain a 4.5:1 color contrast ratio when ∆colorPlatformGray900 is placed on top
∆colorBrandedInfoTimeoutLight #D0E3F6 Needs to maintain a similar darkness value to the default color. This color is used not only for the timeout indicator, but also for a hover state on the quick action button used for the close affordance.
∆colorBrandedCaution #C45413 Needs to maintain a 4.5:1 color contrast ratio when white is placed on top
∆colorBrandedCautionTimeout #9E440F Needs to maintain a similar darkness value to the default color. This color is used not only for the timeout indicator, but also for a hover state on the quick action button used for the close affordance.
∆colorBrandedCautionLight #FCF6F3 Needs to maintain a 4.5:1 color contrast ratio when ∆colorPlatformGray900 is placed on top
∆colorBrandedCautionTimeoutLight #F5DDD1 Needs to maintain a similar darkness value to the default color. This color is used not only for the timeout indicator, but also for a hover state on the quick action button used for the close affordance.
∆colorBrandedError #CE1616 Needs to maintain a 4.5:1 color contrast ratio when white is placed on top
∆colorBrandedErrorTimeout #AA1212 Needs to maintain a similar darkness value to the default color. This color is used not only for the timeout indicator, but also for a hover state on the quick action button used for the close affordance.
∆colorBrandedErrorLight #FCF3F3 Needs to maintain a 4.5:1 color contrast ratio when ∆colorPlatformGray900 is placed on top
∆colorBrandedErrorTimeoutLight #F5D1D1 Needs to maintain a similar darkness value to the default color. This color is used not only for the timeout indicator, but also for a hover state on the quick action button used for the close affordance.
∆colorBrandedSuccess #1B7C35 Needs to maintain a 4.5:1 color contrast ratio when white is placed on top
∆colorBrandedSuccessTimeout #145C27 Needs to maintain a similar darkness value to the default color. This color is used not only for the timeout indicator, but also for a hover state on the quick action button used for the close affordance.
∆colorBrandedSuccessLight #F3F8F5 Needs to maintain a 4.5:1 color contrast ratio when ∆colorPlatformGray900 is placed on top
∆colorBrandedSuccessTimeoutLight #D7EADF Needs to maintain a similar darkness value to the default color. This color is used not only for the timeout indicator, but also for a hover state on the quick action button used for the close affordance.

Shape

Element Property Value
Container Large component ∆shapeBranded


Placement

Notifications are a vehicle to deliver medium emphasis messages to the end user, and can be placed within the experience in several different ways: embedded, pinned, anchored, and global.

Embedded placement

When a notification needs to appear in close proximity to a specific UI element (like a form field), placing it directly next to the component that triggered the need for an embedded notification will aid the user in understanding the relationship between the message and the potential reaction to the message. Only the inline and toast notifications can utilize the embedded placement.


Pinned placement

Sometimes a message needs to imply a relationship to grouped UI. In this case, a pinned placement allows the notification to appear either at the top or bottom of the grouped UI. If the UI is too tall for the entire group to appear on screen at once, the pinned notification will stay visible and will not move until the user scrolls beyond the bounds of the parent container. Only the inline and toast variants can utilize the pinned placement. 

Anchored Placement

When a message needs to imply a relationship to all the UI within view, an anchored placement allows the notification to appear anchored either to the top or bottom of the viewport — and will allow content to pass underneath as the user scrolls. Since there is some elevation implied by content passing underneath, only toast notifications can utilize this placement. In case the notification covers up UI on mobile, users can fling the anchored notification between the top and bottom anchored positions using a vertical swipe gesture.

Global Placement

When a message needs to imply a relationship to the entire system (not just the current view), a global placement provides the space necessary to achieve this. When notifications use the global placement, the message is persistent between every view within the experience. Since there is no elevation implied, and the message enforces the shifting of other content around it, only the banner notification can utilize this placement. 

Small screen

When viewed on mobile devices, the global placement of notifications appears below the mobile top bar, and scrolls with the content. After wrapping to two lines, any additional copy is truncated. If the copy is truncated, tapping anywhere (other than the close affordance) will expand the notification enough to show the entire message.

Wide screen


When viewed on wide screen devices, the global placement of notifications appears above the header and inherits the scrolling behavior of the header.

Behavior

Inline & Toast — Entrance

Inline and Toast notifications share animation styles for Entrance and Dismissal. The animation is quick and subtle enough to direct the user's attention without being overly distracting.

Interaction Steps Duration Easing Notes Haptics
Entrance 1a. Open ∆motionTimeFast ∆motionEasingStandard Scale component from 96–100%
1b. Fade in ∆motionTimeFast ∆motionEasingStandard The side sheet navigation retracts/closes. Fade opacity from 0-100%


Inline & Toast — Exit

Inline and Toast notifications share the same exit animation style as well. This behavior applies to notifications that are resolved, dismissed, or timed out.

Interaction Steps Duration Easing Notes Haptics
Exit 1a. Scale ∆motionTimeFast ∆motionEasingStandard Scale component from 100-96%
1b. Fade in ∆motionTimeFast ∆motionEasingStandard >Fade opacity from 100-0%


Inline & Toast — Timeout

Inline and Toast notifications may be set to timeout after 10 seconds. The user may pause this timer by tapping and holding or hovering over the notification.

Interaction Steps Duration Easing Notes Haptics
Timeout 1. Timer scales down 10 seconds ∆motionEasingLinear Timeout notifications take 10 seconds before auto resolving. The timer scales down using the linear curve to represent the constant change in time.

Inline — Offset

Whenever an inline notification will appear in place of other content, the pre-existing content must move out of the way before the notification enters.

Interaction Steps Duration Easing Notes Haptics
Offset 1. Content moves out of the way ∆motionTimeFast ∆motionEasingStandard Pre-existing content moves out of the way for the notification
2. Notification entrance ∆motionTimeFast ∆motionEasingStandard Notification enters using above documentation


Banner — Entrance

When a banner notification appears it displaces all of the content beneath its surface.

Interaction Steps Duration Easing Notes Haptics
Enter 1. Y Position ∆motionTimeFast ∆motionEasingStandard Move the banner vertically from -56px to 0

Banner — Exit

When a banner notification exits it reverses its entrance animation, resting just off-screen.

Interaction Steps Duration Easing Notes Haptics
Enter 1. Y Position ∆motionTimeFast ∆motionEasingStandard Move the banner vertically from 0 to -56px


Developer Docs

Vue Developer Docs

Component documentation coming soon!