Search the component library



Notifications are usually short messages and can be informational or instructional. Use notifications to announce new features or encourage users to take an action.

Notifications drawer

The Notifications drawer contains a list of current notifications. When users click the Notifications icon in the header, this triggers the drawer to slide in from the right.

Listing the currently active notifications.

Single notification detail.

Notifications archive

The Notifications archive contains a list of archived notifications.

Users can click the Archive link to move the notification to the Notifications archive. Then if they want to view any archived notifications, they just click View Archive.


Notifications list

DrawerUse the standard drawer component
Spacing25px vertical spacing between notifications
TypographyNotification title is Bold UI Text in Charcoal
Summary text is Basic UI Text in Medium Gray
Date text is Small UI Text in Medium Gray
Archive link is Small UI text
ButtonArchive button is a Large Primary Button
Unread indicator9px diameter circle, 6px right padding
Hot Pink color
Blank stateIf there are no active messages, display a message directing users to the notification archive

Notifications archive

TypographyArchive heading is a Basic Section UI Heading
Remaining type styles are inherited from the notification list

Notifications detail

TypographyInherited from the notification list style

Icon details

ColorsThe 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
BadgeThe badge uses Small UI Text in White
2px border radius
It is set 8px to the right of the notification-18 icon
NumberingThe badge number reflects the number of active but unread notifications



Initial design