Notifications (Master)

Notifications communicate information to the user and provide time-sensitive or immediate feedback.

Variants

Notifications
Variant Usage

Pending

Notifications pertaining to pending status/warnings

Error

Notifies the user that there is an error detected

Generic

Default type of notification, provides contextual information

Success

Notifies the user that action taken is a success

Anatomy

Notifications are made up of the following:


  1. Icon: Indicates the type of notification it is
  2. Message: Describes the notification
  3. Coloured container: Supplements the Icon in indicating the type of notification it is

Size

Notifications:

  1. Have a 16px padding.
  2. Takes up up to 87.2% of the screen width, capped at 327px.

Text Style

Notifications consists of only one text size

  1. Text size at 14px. Use “Body” text style on Figma.

 

Behavior

Slide in right right to left. slide out from centre to right.

Timing: Each 1 character equals every 100 milliseconds (including spaces). For a short notification that varies between 20 to 30 words, giving 3 seconds as an average reading time is adequate.

Dos and Don'ts

doimage
For passive notifications, choose a lighter design while an action-required notification, design to attract user’s attention.
dontimg
Cover other content with inline notifications or place notifications in the middle of the screen.
Keep notifications at the top or bottom of the screen, width fixed and as brief as possible.
Write long notification messages (beyond 3 lines of text).