Sign In

Notification Styles

Notification Styles and Usage


Notifications are a low intrusive method of communicating content to the user. They can be positioned to dynamically appear and are typically used to communicate responses from the system. They have color states and iconography to support their purpose.

Colors & Iconography

We leverage 4 types of notifications. Each notification has a specific color and iconography


Informational notfications are used to give the user additional information that isn’t a result of an event.

Color Icon
Blue 1


Success notifications are used to inform the user of a successful action, this action could be user generated or system generated.

Color Icon
Green Primary


Danger notifications are used to inform user of errors or failures.

Color Icon
Red 1


Warning notifications are used when an event or action triggers merrits a warning message.

Color Icon
Orange 1


notification anatomy
  1. Icon

    See Colors & Iconography of this page to find out which icon goes with which notification type. Icons are always required

  2. Title

    Title should be short and to the point

  3. Close Option

    Close option is required. We never want to put the user in a situation where he can’t manually dismiss a notification.

  4. Message

    Messages are not required but can be added to assist the purpose of the notification.



While notifications serve as a purpose of being less obtrusive and interruptive than a modal, they should appear within the viewport. However, the placement should not block the user from completing their task at anytime. We have three options available for positioning.

  • Docked

    Docked notifications should be a direct informative message that is placed across the width, at the top or bottom border of the body of content. This type of notification is great for system wide notifications and there should only be 1 docked notification on thes creen at any given time.

  • Floating

    Floated notifications should be placed in a suitable location of the user interface. A location that does not obstruct important content. But still acquires the user’s focus. The content of a floated notification should provide updates on an app’s process.

  • Form/Inline

    An inline form notification is to be placed within a form or form modal. And it should be reserved for fatal error messages, HTTP failures, etc.


A notification should employ animation when being executed. And should not have a jerky, instantaneous appearance. Animated feedback focuses attention on what’s important without creating unnecessary distraction. It also displays the hierarchy between the parent element (a viewport) and child elements (the messages).

Notifications VS Modals

Notifications should communicate messages that are minimally interruptive. And they should not require user action. If you require a user response or acknowledgement, you should consider using a Modal