Notifications
Search the component library

Notifications

v1.0.0

Inform users of new features or actions they should take.

Usage Guidelines

Any notification that occurs in the next gen product platform should use this component for frontend presentation.

Features

  • Header icon and badge
  • Lists active notifications, individual notification detail view
  • Retains an archive of old notifications

Notification Drawer

Selecting the notification icon in the header opens a drawer which initially lists all current notifications. Selecting a notification will show more information about it and provide guidance or UI controls for next steps.

Listing the currently active notifications.

Single notification detail.

Notification Archive

Notifications are removed from the drawer by archiving them. A button at the bottom of the initial list provides access to the previous notification archive in case a user needs to reference an older item.

Redlines

Notification list

Drawer
Spacing
  • 25px vertical spacing between notifications
Typography
Button
Unread Indicator
  • 9px diameter circle, 6px right padding
  • Hot Pink color
Blank State
  • If there are no active messages, display a message directing users to the notification archive

Notification Archive

Typography

Notification Detail

Typography
  • Inherited from the notification list style

Icon details

Colors
  • The notification-18 icon is Medium Gray by default, and Charcoal on hover
  • The badge has a Hot Pink background when there are unread notifications and uses a 2px White Gray border
Badge
  • The badge uses Small UI Text in White
  • 2px border radius
  • It is set 8px to the right of the notification-18 icon
Numbering
  • The badge number reflects the number of active but unread notifications

Changelog

1.0.0

Initial design