Notification Styles & 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.
We leverage 4 types of notifications. Each notification has a specific color and iconography
Informational
Informational notifications are used to give the user additional information that isn't a result of an event.
| Color | Icon |
|---|---|
ColorBlue 1 |
Icon |
Success
Success notifications are used to inform the user of a successful action, this action could be user generated or system generated.
| Color | Icon |
|---|---|
ColorGreen 4 |
Icon |
Danger
Danger notifications are used to inform user of errors or failures.
| Color | Icon |
|---|---|
ColorRed 1 |
Icon |
Warning
Warning notifications are used when an event or action triggers merits a warning message.
| Color | Icon |
|---|---|
| Color Orange 1 | Icon |
See Colors & Iconography of this page to find out which icon goes with which notification type. Icons are always required
Messages should be relevant to the context that triggered the notification and follow our voice and tone guidelines
Close option is required. We never want to put the user in a situation where he can't manually dismiss a 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 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 the screen at any given time.
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.
An inline form notification can be placed within a form or form modal. They are often used for form 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 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