Skip to main content

Notifications

Notifications provide unobtrusive, short-lasting, contextual feedback to the user.

Specifications

  • Notifications typically convey the status of the system.

  • A Notification also may be used to convey the resulting status of an action the user has taken. For example, if the user takes some action or undertakes a task, upon submit a Success, Warning, Error, or processing/loading may be communicated to the user via a Notification

Size Example Height
Heading & Text

Example of a Notifications Spec

142-200px
Heading & Icons

Example of a Notifications with Icons

106px

Note: All items spacing are 20dp. Incab size only, see mobile for smaller options for in-field if required.

Types

There are two types of Notifications:

  • Basic toast message with heading text only.
  • When more information is required add sub-text.
State Example
Success

Example of a Success Notification

Information

Example of a Information Notification

Loading

Example of an Loading Notification

Alert

Example of a Alert Notification

Error

Example of a Error Notification

Behaviors

  • Swipe right to dismiss or press the close button
  • Toasts fades out automatically 3 or 6 seconds depending on the importance

Editorial

  • Keep titles three to five words if possible.
  • For titles, use title case and capitalize prepositions of four letters or more.
  • Messages should tell the user what’s happening in friendly, non-technical language.
  • If the message requires a user to take action in order to continue or complete a task, use an Alarm instead.
  • For messages, use full sentences with punctuation. Use sentence case.
Last updated January 4, 2023.